我想为Highcharts列图中的每一列添加一行 [英] I want to add a line to each column in a Highcharts column chart

问题描述

有什么方法可以将单行添加到列图表中的每列中？例如，我将测试分数绘制为列。每个测试都有一个最低通过等级，我想在该列上显示为一条线，并且可能会添加一个显示通过等级的工具提示。每个考试的及格分数并不总是相同的。如果测试等级不符合及格等级，它将在线以下;如果它超过了合格等级，该行将出现在该列上。

Is there any way to add a single line to each column in a column chart? For instance, I have test scores plotted as columns. Each test has a minimal passing grade that I want to display as a line on that column, and possibly add a tooltip that shows the passing grade. The passing grades for each test are not always the same. If the test grade does not meet the passing grade it will be below the line; if it exceeds the passing grade, the line will appear on the column.

推荐答案

您可以使用组合图表。

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.

这篇关于我想为Highcharts列图中的每一列添加一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！