如何将条形图数据输入到整体饼图中？ (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 个中的第一个）条形图

总数将从三个条形图中的每一个中获取，例如。 '移动性总'

    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);

      });
    }); 

Highcharts/饼图

这是条形图总计应该添加的地方，并适应饼图。我一直在阅读潜在的解决方案，但似乎根本没有任何问题。这就是我所拥有的，仍然绝对有效。

        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