javascript - 忽略 Highstock 标记特定选项

Question

我想知道是否有办法将动态设置应用于 highstock 图表的单个标记？我找了半天，感觉API有问题。似乎没有办法调整特定基准上的标记设置。例如:

$('#container').highcharts('StockChart', {
    chart : {
        events : {
            load : function () {
                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.round(Math.random() * 100);
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    series : [{
        data : (function () {
            var data = [], time = (new Date()).getTime(), i;
            for (i = -999; i <= 0; i += 1) {
                data.push([
                  { x: time + i * 1000,
                    y: Math.round(Math.random() * 100),
                    marker:{
                        fillColor:'red'
                    }
                  }
                ]);
            }
            return data;
        }())
    }]
}

我制作了一个基本的 Highstock 演示来说明我的观点。请参阅演示该问题的 jsfiddle:http://jsfiddle.net/9xj0nz72/1/

也许我的 fiddle 有错误...或者我必须在 Github 上创建一个问题？

非常感谢!!

Answer 1

我必须在 addPoint 方法中分配样式，您不能只推送到 data 数组。您必须在 chart = new Highcharts.StockChart() 变量上使用它。

我很确定我得到了您所希望的使用以下内容。为了演示，我为每个新点分配了随机颜色和半径。

$(function () {

  var chart = new Highcharts.StockChart({
    chart: {
      renderTo: 'container'
    },
    plotOptions: {
      series: {
        marker: {
          enabled: true
        }
      }
    },
    series: [{
      name: 'Random data',
      data: [],
      time: (new Date()).getTime()
    }]
  });

  /* add new random point every 1 second */
  var i = 0;
  setInterval(function () {
    i++;
    chart.series[0].addPoint({
      marker: {
        /* assign a random hex color and radius */
        fillColor: '#' + (Math.random() * 0xFFFFFF << 0).toString(16),
        radius: Math.floor(Math.random() * 10) + 1  
      },
      y: Math.random() * 100,
      x: i * 1000,
    }, true, false);
  }, 1000);

});

Your updated JSFiddle