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[]来访问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' }); } } }); });来访问xAxis'元素的值。请检查以下example：

Image from origin 'http://192.168.1.67:5555' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

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]
    }]
  });
});

绘制垂直线和水平带

2 个答案: