如何將條形圖數據輸入到整體餅圖中？ (Highcharts/JS/jQuery)

Question

對這一切都很陌生； 我一直在實現 Highcharts 餅圖的 jQuery。 每個條形圖都使用單選按鈕輸入構建，並且每個輸入都有關聯的浮點值。 然后將這些值相加以構建條形圖。 我正在嘗試使用從三個單獨的條形圖中獲取的總和來構建它。 任何幫助將不勝感激。 這是我敲的一個 jsfiddle，請將運行窗口擴展到最大

HTML

        <div class="" id="meansTransport" >
                               <ul>
                                    <p id="boxTitle">Means of transport</p>
                                    <input type="radio" id="question-means-A" name="test" value="0.0" />
                                    <label for="question-means-A"> I almost always go by public transport, cycle or walk</label><br>
                                    <input type="radio" id="question-means-B" name="test" value="1.4"  />
                                    <label for="question-means-B"> I use the car and public transport about the same amount</label><br>
                                    <input type="radio" id="question-means-C" name="test" value="1.8" />
                                    <label for="question-means-C"> I almost always drive by car</label><br>
                                </ul>
                           </div>
                           <div class="col-lg-5 col-md-5 col-sm-5" id="graphMobility"></div> 

Highcharts/（3 個中的第 1 個）條形圖

總計將從三個條形圖中的每一個中獲取，例如。 '流動性總計'

    var graphMobility = Highcharts.chart('graphMobility', {
    chart: {
        type: 'column',
        backgroundColor: "#fafafa", 
    },

    series: [{
        name: 'Per capita CO2 emissions',
        color: 'rgba(165,170,217,1)',
        data: [2.5, 3.1, 2.2, 1.6],
        pointPadding: -0.2,
        pointPlacement: 0.0
    }, {
        name: 'Personal CO2 footprint', 
        opacity: 0.9,
        borderWidth: 3, 
        borderColor:'white',
        dashStyle: 'ShortDot', 
        data: [0.0],
        pointPadding: -0.2,
        pointPlacement: 0.0
        }]
    });


    var sum = 0;


    $("#mobilityBox input:radio").click(function() {
       sum = 0.8;

        $("#mobilityBox input:radio:checked").each(function(idx, elm) {
            sum += parseFloat(elm.value, 10);
        });

        var mobilityTotal = sum;

        graphMobility.series[1].setData([sum], true);

      });
    }); 

高圖/餅圖

這是條形圖總數應該添加的地方，並適應餅圖。 我一直在閱讀潛在的解決方案，但似乎什么都沒有。 這就是我所擁有的仍然絕對有效的東西。

        var circlePie = Highcharts.chart('circlePie', {
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false, 
        backgroundColor: "#fafafa",
    },

    title: {
        text: 'Household: 3t <br> Total: 11t ', 
        align: 'center',
        verticalAlign: 'middle',
        y: 35, 
        style: {
                fontSize: '3.1vh',
                color: '#404040', 
                fontWeight: '600', 
                lineHeight: '45', 
                fontFamily: 'Verdana'
            }
    },

    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',

    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: false,
                distance: 0,
                style: {
                    fontWeight: 'bold',
                    color: 'white',
                }
            },
            startAngle: -35,
            endAngle: -36,
            center: ['50%', '50%'],
            size: '100%'
        }
    },
    series: [{
        type: 'pie',
        name: 'Emissions share',
        innerSize: '53%',
        data: [
            ['Mobility', 28.9],
            ['Food', 23.29],
            ['Household', 33],
        ]
    }]
    }); 

所以，我想要做的是獲取條形圖和數據，例如。 “mobilityTotal”並將其輸入到上面的餅圖中——系列數據數組 [0] 'Mobility'。 這個問題可能非常基礎。 再次使用jsfiddle，請將運行窗口擴展到最大

Answer 1

您需要做的就是更新pie上的正確點。 例如：

$("#mobilityBox input:radio").click(function() {
  ...

  circlePie.series[0].points[0].update({
    y: sum
  });
  graphMobility.series[1].setData([sum], true);
});

---

現場演示： https : //jsfiddle.net/BlackLabel/v458b67q/6/

API 參考： https : //api.highcharts.com/class-reference/Highcharts.Point#update