Как обновить только атрибут данных по сериям в старших чартах с помощью json?

Question

В настоящее время я новичок в этом и ищу самый простой способ загрузить из файла json данные для разных серий, но сохранить другие атрибуты каждой серии, как они есть в javascript.

Так, как показано в приведенном ниже коде, есть две серии «Углерод» и «Добавить».Файл 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