javascript - 根据 X 轴数据突出显示特定区域

Question

所以我想做的是，我试图从 CSV 文件中获取数据，并从其他 CSV 文件中获取数据，我试图突出显示图表中的特定区域。

例如: 这是我得到的图表。 通过添加以下代码。

$.get('abc.csv', function(data) {
var lines = []
lines = data.split('\n');
console.log(lines);


var ecgData=[];
$.each(lines, function(lineNo, lineContent){
    if(lineNo >= 0)
        {

        ecgData[lineNo-0] = parseFloat(lineContent.substring(lineContent.lastIndexOf(",")+1) );
          //gibber=500;

        //m=m+500;
        }//console.log('PPG Data', ppgData[ppgNo-0])

    });


 featurex = [5,10,14,34,56,78,90,95] ;
 featurey = [0,0,1,0,0,3,0,2];
  zip = (xs, ys) => xs.reduce((acc, x, i) => (acc.push([x, ys[i]]), acc), []);

    //console.log(ecg);
    console.log(ecgData);

    Highcharts.chart('ecg', {
        chart: {
            type: 'line',
             zoomType: 'xy',
                panning: true,
            panKey: 'shift'
        },
        credits: {
                    enabled: false
                },
        title: {
        text: 'ECG Data'
    },
    subtitle: {
        text: ''
    },
    xAxis: {

        crosshair: false
    },
    yAxis: {
        title: {
            text: 'ECG Peaks'
        }
    },
   tooltip: {
        enabled: false
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: '',
        lineWidth: 1,
        data: ecgData,
         animation: {
                duration: 14000
            }

    },
    {    type: 'column',
        name: 'Features',
        data: zip(featurex, featurey),
        animation: {
                duration: 14000
      }
  }
     ]
});

});

我的图表:

现在正如您从图表中看到的那样。我将 features 数据作为图表中的条形进行获取。

 featurex = [5,10,14,34,56,78,90,95] ;
 featurey = [0,0,1,0,0,3,0,2];

但这不是我想要的，我想要的是，当特征 x 值为 1 时，我想用特定颜色突出显示该区域，当它为 2 时，应该用其他颜色填充，如下例所示:

注意:这只是数据外观的一个示例，请勿将数据与上述图像数据进行数学运算。

我希望我的问题很清楚。

Answer 1

在 load 事件中，您可以检查某个点是否满足您的条件并将 plotBands 添加到图表中。

chart: {
    events: {
        load: function() {
            var xAxis = this.xAxis[0],
                points = this.series[0].points,
                from,
                to,
                plotBands = [];

            points.forEach(function(point, i) {
                from = points[i - 1] ? points[i - 1].x : point.x;
                to = points[i + 1] ? points[i + 1].x : point.x;

                if (point.y === 1) {
                    plotBands.push({
                        color: 'blue',
                        from: from,
                        to: to
                    });
                } else if (point.y === 2) {
                    plotBands.push({
                        color: 'green',
                        from: from,
                        to: to
                    });
                }
            });

            xAxis.update({
                plotBands: plotBands
            });
        }
    }
}

<小时/>

现场演示: http://jsfiddle.net/BlackLabel/vm0ouwp5/

API引用: https://api.highcharts.com/highcharts/xAxis.plotBands