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/

如果你不喜欢这条线，你可以使用＆＃39; scatter＆＃39;代替。

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

http://jsfiddle.net/sozhojst/

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

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

2 个答案: