且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

我想为Highcharts列图中的每一列添加一行

更新时间:2023-02-06 09:12:23

您可以使用组合图表。

You could use a combination chart. Use columns for the actual grades, and plot a line chart over the top for the passing grades.

 $('#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/

如果您不喜欢该行,则可以使用'scatter'。

If you don't like the line, you could use 'scatter' instead.

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

http://jsfiddle.net/sozhojst/

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

Note, you can supply your own image for the symbol if you don't like triangles.