highchartsJS 一些基本常用操作

基本的数据添加

   

    var i = 0;
    $('#button').click(function () {
        var chart = $('#container').highcharts();
        chart.subtitle.text="ss";
        chart.series[0].addPoint(50 * (i % 3)); //在已有的数据中添加
        i += 1;
        chart.addSeries({
            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] //添加一组新的数据
        });
    });

 更换数据名称：

  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'
                              });