javascript - 在 highchart 中应用股票图表样式

Question

到目前为止，我已经在我的页面中创建了一个 Highcharts 。但是，如果它们低于或高于 0，我想应用不同的颜色。我在 0 上画了一条线，但似乎无法更改颜色，因此看起来如下所示:

这是我的代码

$(function() {
  $('#chart-container').highcharts({
    title: {
      text: '',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'],

      labels: {
        enabled: false
      },
    },
    yAxis: {
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      plotLines: [{
        color: 'orange',
        width: 2,
        value: 0,
      }]
    },
    tooltip: {
      valueSuffix: 'Kr.'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    credits: {
      enabled: false
    },
    series: [{
      showInLegend: false,
      name: 'Tokyo',
      data: [0.0, 6.9, 9.5, -14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>

Answer 1

您正在寻找 negativeColor和 negativeFillColor选项。

官方链接在这里example .

并且您的代码已更新:

$(function() {
  $('#chart-container').highcharts({
    title: {
      text: '',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'],

      labels: {
        enabled: false
      },
    },
    yAxis: {
      gridLineWidth: 0,
      minorGridLineWidth: 0,
      title: {
        text: ''
      },
      labels: {
        enabled: false
      },
      plotLines: [{
        color: 'orange',
        width: 2,
        value: 0,
      }]
    },
    tooltip: {
      valueSuffix: 'Kr.'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    credits: {
      enabled: false
    },
    series: [{
      showInLegend: false,
      name: 'Tokyo',
      data: [0.0, 6.9, 9.5, -14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
      color: 'purple',
      negativeColor: 'red'
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="chart-container" style="min-width: 310px; height: 100%; margin: 0 auto"></div>