Question

Highcharts教程中的经典示例是：

$(function () { 
 $('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 1, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }]
});
});

这会创建2组3条。如何添加另一个独立于类别的栏（即整个图形的一个栏而不是将其添加到每个系列）？例如：＆＃34;每天推荐的水果份量＆＃34;

Apples                                -
Bananas                               -
Oranges                               ----

Apples                                -----
Bananas                               -------
Oranges                               ---

Recommended servings of fruit per day ----

Answer 1

您可以使用不同的系列类型（columnrange）来完成此操作，例如：http://jsfiddle.net/3bQne/1163/

$('#container').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        minRange: 0.5,
        categories: ['Apples', 'Bananas', 'Oranges', 'Recommended']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 1, 4]
    }, {
        name: 'John',
        data: [5, 7, 3]
    }, {
        type: 'columnrange',
        name: 'Recommended',
        data: [ [3, 0, 7] ],
        tooltip: {
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.high}</b><br/>'
        }
    }]
});

注意：要使用列范围，请添加highcharts-more.js文件。

注意2：为xAxis添加minRange，以使至少一列可见

添加一个独立于类别的栏（“参考”栏）

1 个答案: