基本的数据添加
1 var i = 0; 2 $('#button').click(function () { 3 var chart = $('#container').highcharts(); 4 chart.subtitle.text="ss"; 5 chart.series[0].addPoint(50 * (i % 3)); //在已有的数据中添加 6 i += 1; 7 chart.addSeries({ 8 data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] //添加一组新的数据 9 }); 10 });
更换数据名称:
var name = false; $('.change[index=name]').click(function() { options.series[0].name = name ? null : 'First'; chart = new Highcharts.Chart(options); name = !name; });
数据显示数字
//Set Enable DataLabels var enableDataLabels = false; $('.change[index=data-labels]').click(function() { options.series[0].dataLabels.enabled = enableDataLabels; chart = new Highcharts.Chart(options); enableDataLabels = !enableDataLabels; });
显示数据点
//Set Enable Markers var enableMarkers = false; $('.change[index=markers]').click(function() { options.series[0].marker.enabled = enableMarkers; chart = new Highcharts.Chart(options); enableMarkers = !enableMarkers; });
更换数据颜色
//Set Color var color = false; $('.change[index=color]').click(function() { options.series[0].color = color ? null : Highcharts.getOptions().colors[1]; chart = new Highcharts.Chart(options); color = !color; });
更换数据类型
// Set type $.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function (i, type) { $('.change[index=' + type+']').click(function () { options.chart.type = type; chart = new Highcharts.Chart(options); }); });
<button class="change" index="line">Line</button> <button class="change" index="column">Column</button> <button class="change" index="spline">Spline</button> <button class="change" index="area">Area</button> <button class="change" index="areaspline">Areaspline</button> <button class="change" index="scatter">Scatter</button> <button class="change" index="pie">Pie</button>
更新颜色,update()
chart.series[0].update({ color:'rgb(244, 91, 91)' }); chart.series[1].update({ color:'#398bfb' });