如何使用json更新highcharts中系列下的仅数据属性？

Question

我目前对此并不陌生，我正在寻找从json文件加载不同系列数据的最简单方法，但要保留每个系列的其他属性，就像它们在javascript中一样。

因此，如下面的代码所示，有两个系列“ Carbon”和“ Add”。 JSON文件将只包含两个系列的数据：

[
{"data":[70]},
{"data":[-30]}
]

我拥有的脚本如下：

$(function () {
	
	$(document).ready(function(){
	
		$.getJSON('carbonData.json', function(data) {
			
			var carbon = new Highcharts.chart({
				chart: {
					renderTo: 'Carbon',
					marginLeft:-30,
					plotBackgroundColor: null,
					plotBackgroundImage: null,
					plotBorderWidth: 0,
					plotShadow: false,
					type: 'bar'
				},
				credits: {
					enabled: false
				},
				title: {
					text: ''
				},
				xAxis: {
					labels:{enabled:false},
					lineWidth: 0,
					minorTickLength: 0,
					tickLength: 0,
					gridLineWidth: 0,
					minorGridLineWidth: 0,
					categories: ['']
				},
				yAxis: {
					labels:{
						enabled: false,
					},
					plotLines: [{
						value: -30, 
						label: { 
							text: 'Target<br/>30 kg/t',
							style:{fontSize: "10px"},
							rotation:0,
							align: 'center', 
							x: 0,
							y:25
							}
					},{
						value: 70, 
						label: { 
							text: 'Target<br/>70 kg/t',
							style:{fontSize: "10px"},
							rotation:0,
							align: 'center', 
								x: 0,
								y:25
							}
						}],

					gridLineWidth: 0,
					minorGridLineWidth: 0,
					min: -45,
					max:75,
					title: {
						text: ''
					}
				},
				colors:['#4572A7','#AA4643'],
				legend: {
					enabled: false,
				},
				tooltip: {
					enabled:false,
				},
				plotOptions: {
					series: {
						stacking: 'normal',
					}
				},
				series: [{
					name: 'Carbon',
					data: [70],
					dataLabels: {
						enabled:true,
						x: 16,
						format: '{series.name}<br/>{point.y} kg/t',
						style: {
							align: 'center',
							fontSize: "10px",
							fontWeight:'normal',
							textOutline: false,
							fontFamily: 'sans-serif',
							'text-anchor': 'middle'
						}
					}
				}, {
					name: 'Add',
					data: [-30],
					dataLabels: {
						enabled:true,
						x:13,
					   	formatter: function() {
							return this.series.name+'<br/>'+Math.abs(this.y)+' kg/t';
						},
						style: {
							color: 'white',
							align: 'center',
							fontSize: "10px",
							fontWeight:'normal',
							textOutline: false,
							fontFamily: 'sans-serif',
							'text-anchor': 'middle'
						}
					}
				}]
					
			});
		
		});
				
	});

});
		

所以我想将JSON文件的信息对应地映射到每个系列。

谢谢。

Answer 1

使用setData方法：

var data = [{
        "data": [70]
    },
    {
        "data": [-30]
    }
]

var chart = Highcharts.chart('container', {
    series: [{
        color: 'red',
        data: []
    }, {
        color: 'blue',
        data: []
    }]
});

document.getElementById("data").addEventListener('click', function() {
    data.forEach(function(el, i) {
        chart.series[i].setData(el.data);
    });
});

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

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