我想在Highcharts柱形图的每一列中添加一行

Question

有没有办法在柱状图中的每列中添加一行？例如，我将考试成绩绘制为列。每个测试都有一个最低及格分数，我想在该列上显示为一行，并可能添加一个显示及格分数的工具提示。每次考试的及格分数并不总是一样的。如果测试等级不符合合格等级，它将低于该线；如果超过合格坡度，则该线将出现在柱上。

Answer 1

您可以使用我用于创建项目符号图的技术，通过扩展Highcharts标记符号以包括垂直线和水平线。

Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M',x ,y + height / 2,'L',x+width,y + width / 2];
};

示例用法：

• http://jsfiddle.net/jlbriggs/UGs2E/17/

Answer 2

您可以使用组合图表。使用列表示实际成绩，并在顶部绘制通过成绩的折线图。

 $('#container').highcharts({
    title: {
        text: 'Exam Scores'
    },
    xAxis: {
        categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5']
    },
    series: [{
        type: 'column',
        name: 'Marks',
        data: [83, 72, 71, 63, 74]
    }, {
        type: 'line',
        name: 'Pass Mark',
        data: [75, 79, 63, 70, 80],
        marker: {
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[3],
            fillColor: 'white'
        }
    }]
});

http://jsfiddle.net/hfwLd118/

如果你不喜欢这条线，你可以用"散射"代替。

{
        type: 'scatter',
        name: 'Pass Mark',
        data: [75, 79, 63, 70, 80],
        marker: {
            symbol:'triangle'
        }

http://jsfiddle.net/sozhojst/

注意，如果您不喜欢三角形，可以为符号提供自己的图像。