如何使用HighChart将plotLines和plotBands添加到HighStocks图中？

Question

我一直在尝试将plotLines添加到此图表中，并且我已按照在线语法进行操作;但是，plotLine将不会出现。

plotBands显得很好，所以我只是想看看我可能缺少什么才能让它发挥作用。

以下是我jsFiddle的链接： https://jsfiddle.net/fbmoju7f/75/

＆＃13;

＆＃13;

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
  Highcharts.stockChart('container', {
    title: {
      text: 'Morphine'
    },

    xAxis: {
    type: 'datetime',
      floor: Date.UTC(2017, 2, 2),
      ceiling: Date.UTC(2017, 2, 9),
      plotLine: {
        value: Date.UTC(2017, 2, 8),
        color: '#3A1231', //Purple
        width: 2,
        dashStyle: 'solid'
      }
    },

    yAxis: { //Keep yAxis ----------------------------------------
      floor: 0,
      ceiling: 100,
      plotBands: [{
        color: '#F9F98E', //Yellow
        from: 0,
        to: 10
      }, {
        color: '#9DF98E', //Green
        from: 10,
        to: 30
      }, {
        color: '#F9958E', //Red
        from: 30,
        to: 100
      }]
    },

    rangeSelector: {
      buttons: [{
        type: 'day',
        count: 8,
        text: '-7d'
      }, {
        type: 'day',
        count: 4,
        text: '-3d'
      }, {
        type: 'day',
        count: 3,
        text: '-2d'
      }, {
        type: 'day',
        count: 2,
        text: '-1d'
      }],
      selected: 2 //Initial view upon opening application
    },

    series: [{
      type: 'spline',
      color: '#4C91FA',
      data: [ //Test data set
        [Date.UTC(2017, 2, 1), 5.7],
        [Date.UTC(2017, 2, 2), 7.3],
        [Date.UTC(2017, 2, 3), 10.3],
        [Date.UTC(2017, 2, 3), 15.6],
        [Date.UTC(2017, 2, 4), 12.7],
        [Date.UTC(2017, 2, 4), 14.0],
        [Date.UTC(2017, 2, 4), 17.8],
        [Date.UTC(2017, 2, 5), 19.1],
        [Date.UTC(2017, 2, 5), 18.4],
        [Date.UTC(2017, 2, 6), 19.5],
        [Date.UTC(2017, 2, 6), 22.7],
        [Date.UTC(2017, 2, 6), 25.1],
        [Date.UTC(2017, 2, 7), 28.2],
        [Date.UTC(2017, 2, 7), 30.4],
        [Date.UTC(2017, 2, 8), 29.6],
        [Date.UTC(2017, 2, 9), 29.0],
        [Date.UTC(2017, 2, 10), 27.8]
      ]
    }]
  });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/stock/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的属性名称错误，并未将plotLines括在括号中。应该是这样的：

xAxis: {
  type: 'datetime',
  floor: Date.UTC(2017, 2, 2),
  ceiling: Date.UTC(2017, 2, 9),
  plotLines: [{
    value: Date.UTC(2017, 2, 8),
    color: '#3A1231', //Purple
    width: 2,
    dashStyle: 'solid'
  }]
},