畫垂直線和水平帶

Question

我直接將數組繪制到我的高級圖表系列中。我需要將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
    }]
});

Answer 1

為此，您可以使用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'
        });
      }
    }
  });
});

Answer 2

要設置垂直/水平線/帶，請使用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.plotBands http://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]
    }]
  });
});