用于导入文本文件的 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 fontsHighcharts.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 containerHighcharts.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