如何使用HTML单选按钮输入（JS / jQuery）更改Highcharts图

Question

我一直在尝试更新Highcharts中的图表，并使用与单选按钮相关联的浮动数据。单选按钮位于页面上，它们与HTML中的float值相关联，应将这些值添加在一起，然后绘制图形。不知道要添加多少代码，但是我想任何真正的指导都将在最后的部分（下面的单独的JS / jQuery部分）中进行。

HTML

<div class="col-lg-7 col-md-7 col-sm-7 ind-quizBox" id="mobilityBox">
                        <div id="navLink1"></div>
                        <div class="" id="meansTransport" >
                            <ul>
                                <p id="boxTitle">Means of transport</p>
                                <input type="radio" id="question-means-A" name="test" value="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="0.4" />
                                <label for="question-means-C"> I almost always drive by car</label><br>
                            </ul>
                        </div>

JAVASCRIPT / HIGHCHARTS

document.addEventListener('DOMContentLoaded', function () {
var graphMobility = Highcharts.chart('graphMobility', {
chart: {
    type: 'column',
    backgroundColor: "#fafafa", 
},

credits: { 
    enabled: false, 
},


navigation: {
    buttonOptions: {
        enabled: false,
    }
},

title: {
    text: ''
},
xAxis: {
    categories: [
        'Ireland',
        'UK',
        'EU', 
        'OECD', 
    ]
},
yAxis: [{
    min: 0,
    title: {
        text: 'CO2 Emissions in metric tons'
    }
}, {
    title: {
        text: ''
    },
    opposite: true
}],
legend: {
    enabled: false, 
    shadow: false
},
tooltip: {
    shared: true, 
    valueSuffix: 't'
},
plotOptions: {
    column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
    }
},
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.8],
    pointPadding: -0.2,
    pointPlacement: 0.0
    }]
});

}）;

JS / jQUERY

(document).ready(function($) {
var sum = 0;

$("input:radio").click(function() {
   sum = 0;

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

    chart.series['Personal CO2 footprint', 0].setData(sum, true);

  });
});

Answer 1

您需要正确参考该系列：

$("input:radio").click(function() {
    sum = 0;

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

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

---

实时演示： http://jsfiddle.net/BlackLabel/jtuhg31o/

API参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData