用于导入文本文件的 Highcharts 区域功能

Question

我试图让图表中的区域在值超过特定阈值时改变颜色。

这是我的图表：

Highchart 资源有一个如何执行此操作的示例：

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/color-zones-simple/

然而，我的问题是，当您的 Highchart 从文本文件导入数据时，我无法在任何地方找到如何执行此操作的示例。

我对图表的样式设置得相当严格，所以这是我的 highchart 代码片段：

$(function () {

    // Load the fonts

Highcharts.createElement('link', {

   href: 'http://fonts.googleapis.com/css?family=Signika:400,700',

   rel: 'stylesheet',

   type: 'text/css'

}, null, document.getElementsByTagName('head')[0]);

// Add the background image to the container

Highcharts.wrap(Highcharts.Chart.prototype, 'getContainer', function (proceed) {

   proceed.call(this);

   this.container.style.background =null;

});

Highcharts.theme = {

    colors: ['#5B8256'],

    chart: {

    backgroundColor: null,

    style: {

    fontFamily: "Arial, Helvetica, sans-serif"},

    plotBorderColor: '#606063'},

    title: {

    style: {

    color: '#eeeeee',

    fontSize: '16px',

    fontWeight: ''}},

    subtitle: {

    style: {

    color: '#eeeeee'}},

    tooltip: {

    backgroundColor: 'rgba(0, 0, 0, 0.85)',

    style: {color: '#F0F0F0'},

    borderWidth: 0},

    legend: {

    itemStyle: {

    fontWeight: 'bold',

    fontSize: '13px'}},

    xAxis: {

    labels: {

    style: {

    color: '#eeeeee'}}},

    yAxis: {

    labels: {

    style: {

    color: '#eeeeee'}}},

    plotOptions: {

    series: {shadow: true},

    marker: {lineColor: '#333'},

    candlestick: {lineColor: '#404048'},

    map: {shadow: false}},

    navigator: {

    xAxis: {gridLineColor: '#D0D0D8'}},

    rangeSelector: {

    buttonTheme: {fill: '#eeeeee',stroke: '#C0C0C8','stroke-width': 1,

    states: {

    select: {fill: '#D0D0D8'}}}},

    scrollbar: {trackBorderColor: '#eeeeee'},

    background2: null};

任何为我指明正确方向的帮助将不胜感激。

Answer 1

您可以通过绘图选项添加区域，例如：    plotOptions: {        series: {            zones: [{                value: 20,                color: '#7cb5ec'            }, {                color: '#90ed7d'            }],            ...        }    }现场演示： https://jsfiddle.net/BlackLabel/5w9rvonz/API 参考： https: //api.highcharts.com/highcharts/plotOptions.series.zones