Как мне ввести данные гистограммы в общую диаграмму p ie? (Highcharts / JS / jQuery)

Question

Очень новый для всего этого; Я застрял в реализации jQuery диаграммы Highcharts p ie. Каждая из гистограмм построена с помощью переключателей, и с каждым входом связаны значения с плавающей запятой. Эти значения затем суммируются для построения гистограммы. Я пытаюсь построить его с помощью итоговых сумм, взятых из трех отдельных гистограмм. Любая помощь будет высоко ценится. Вот 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 / (1st of 3) bar -charts

Суммы будут взяты из каждой из трех гистограмм, например. 'mobilityTotal'

    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 / p ie -art

Здесь следует добавить итоги гистограммы и адаптировать их к p ie -chart. Я читал о потенциальных решениях, но, похоже, ничего не сохранилось. Это то, что у меня есть, и это все еще определенно работает.

        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» и введите его в вышеприведенный массив данных серии p ie [0] «Mobility». Этот вопрос, вероятно, будет действительно базовым c. И снова 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