绘制垂直线和水平带

Draw vertical lines and horizontal bands

本文关键字：水平垂直线绘制更新时间：2023-09-26

我直接将数组绘制到我的高图表系列。我需要将 x 轴上的垂直线和 y 轴上的水平带显示为不同的颜色。

需要根据图表中显示的值添加垂直线和水平条。

这是我的代码：

$('#container').highcharts({
    title: {
        text: 'Graph',
        x: -20 //center
    },
    subtitle: {
        text: '',
        x: -20
    },
    credits: {
        enabled: false
    },
    colors: ['red'],
    xAxis: {
        // categories: [],
        title: {
            text: 'Time'
        },
    },
    yAxis: {
        title: {
            text: 'Rate'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ''
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Heart Rate',
        data: data_arr
    }]
});

为此

，您可以使用chart.xAxis[0].categories.length来访问xAxis的长度，chart.xAxis[0].categories[]来访问xAxis元素的值。检查以下示例：

$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: [10, 20, 30, 40, 50, 60, 70]
    },
    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
    }]
  });

  // the button action
  var hasPlotLine = false,
    $button = $('#button'),
    chart = $('#container').highcharts();
  $button.click(function() {
    for (i = 1; i < chart.xAxis[0].categories.length; i++) {
      if (chart.xAxis[0].categories[i] > 30) {
        chart.xAxis[0].addPlotLine({
          value: i,
          color: 'red',
          width: 2,
          id: 'plot-line-1'
        });
      }
    }
  });
});

要设置垂直/水平线/波段，请使用 plotBands 或/和 plotLines 选项：

对于线条：

    plotLines: [{
        color: '#FF0000',
        width: 2,
        value: 5.5
    }]

对于乐队

    plotBands: [{ // mark the weekend
        color: '#FCFFC5',
        from: Date.UTC(2010, 0, 2),
        to: Date.UTC(2010, 0, 4)
    }],

您可以在此处阅读更多内容：

http://api.highcharts.com/highcharts#xAxis.plotBandshttp://api.highcharts.com/highcharts#xAxis.plotLines

检查以下示例 jsfiddle

$(function() {
  $('#container').highcharts({
    title: {
      text: 'Graph',
      x: -20 //center
    },
    subtitle: {
      text: '',
      x: -20
    },
    credits: {
      enabled: false
    },
    colors: ['red'],
    xAxis: {
      // categories: [],
      title: {
        text: 'Time'
      },
      plotLines: [{
        color: 'blue',
        width: 1,
        value: 1,
        dashStyle: 'longdashdot',
        zIndex: 3
      }, {
        color: 'blue',
        width: 1,
        value: 2,
        dashStyle: 'longdashdot',
        zIndex: 3
      }, {
        color: 'blue',
        width: 1,
        value: 3,
        dashStyle: 'longdashdot',
        zIndex: 3
      }],
      zIndex: 3,
    },
    yAxis: {
      title: {
        text: 'Rate'
      },
      plotBands: [{ // mark the weekend
        color: '#BEE9B4',
        from: 1,
        to: 4
      }, { // mark the weekend
        color: '#EB813B',
        from: 4,
        to: 6
      }, { // mark the weekend
        color: '#E93A0F',
        from: 6,
        to: 8
      }],
      zIndex: 2,
    },
    tooltip: {
      valueSuffix: ''
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    },
    series: [{
      type: 'spline',
      name: 'Heart Rate',
      data: [4, 5, 1, 2, 8, 7, 4, 1]
    }]
  });
});