highstock或者highcharts画图的时候,如果不能预先画图,需要后期再添加图形,就需要用到函数addSeries

addSeries: Highcharts.ChartAddSeriesCallbackFunction

Since 1.2.0

Fires when a series is added to the chart after load time, using the addSeries method. One parameter, event, is passed to the function, containing common event information. Through event.options you can access the series options that were passed to the addSeries method. Returning false prevents the series from being added.Defaults to undefined.

Context: Highcharts.Chart.

Try it

每一次画图都提示error:

Uncaught ReferenceError: chart is not defined
at

找不到chart,后来发现是括号的问题。参数太多就容易眼花。

参考代码:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>

<button id="button" class="autocompare">Add series</button>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/highcharts-more.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="https://www.highcharts.com/samples/data/three-series-1000-points.js"></script>


var chart = Highcharts.stockChart('container', {

    scrollbar: {
        enabled: true
    },

    navigator: {
        enabled: true
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'MSFT',
        data: MSFT
    }]
});

$('#button').click(function () {
    chart.addSeries({
        name: 'ADBE',
        data: ADBE
    });
    
  chart.addSeries({
      name: '范围',
      data: [ [1365560760000, 12.3,35],[1396485620000, 12.5,109],[1487485680000, 12.5,15]],
      type: 'arearange',
      lineWidth: 0,
      color: Highcharts.getOptions().colors[0],
      fillOpacity: 0.3,
      zIndex: 0,
      marker: {
        enabled: false
      }
    }); 
    
    $(this).attr('disabled', true);
});

点击按钮之前的图像:

highcharts添加线之前

点击按钮之后,添加一条线图和一个区域图:

highcharts动态添加线图和区域图

https://api.highcharts.com/highcharts/chart.events.addSeries

https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/members/chart-addseries/

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/arearange-line/


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!



0 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注