javascript - Highcharts - 如何获得水平误差线？

Question

我正在使用 Highcharts 绘制服务器性能统计数据、内存、cpu 等图表。我想添加支持事件并将窗口更改为这些图表。起初我虽然错误栏是完美的，但我需要将它们旋转到水平。据我所知，图表可以旋转，但只能旋转整个图表，而不是一个系列。

chart: {
            type: 'spline',
            inverted: true
        },

任何想法如何在我的图表上获得小水平条，以表示事件的持续时间。根据严重程度着色赢得奖励积分。

Answer 1

您可以使用简单的线系列，其中每个错误栏将是单独的系列，但都将连接到一个主系列，请参见示例：http: //jsfiddle.net/3bQne/646/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    plotOptions: {
        line: {
            color: 'red',
            lineWidth: 10,
            marker: {
                enabled: false,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            }
        }
    },
    series: [{
        type: 'column',
        name: 'some data',
        data: [4, 11, 5, 16, 9, 22, 11, 1]        
    }, {
        type: 'line',
        name: 'errors',
        id: 'err',
        data: [ [0, 4],[3, 4]]
    }, {
        type: 'line',
        name: 'errors',
        linkedTo: 'err',
        data: [ [3, 1], [6, 1]]
    }, {
        type: 'line',
        name: 'errors',
        linkedTo: 'err',
        data: [ [2,10], [3,10]]
    }]
});

Answer 2

使用 plotLines 在图表上绘制线条

yAxis: [{
plotLines:[{
value : where do you want the line,
color: 'color for the line'
}]
}]

xAxis 也是如此

如果您愿意，可以使用 addPlotLine() 方法按需添加它们；

这是 plotLines http://jsfiddle.net/QWLhC/的示例

chart.xAxis[0].addPlotLine({
value: where do you want the plotLine,
color: 'color of the plot line'
});