Question

我有这张Highcharts柱形图：

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        xAxis: {
            type: 'linear'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            column: {
                borderWidth: 0,
                groupPadding: 0,
                pointPadding: 0,
                pointPlacement: 'between',
                shadow: false
            }
        },
        series: [{
            name: 'John',
            data: [{
                x: 0,
                y: 5,
                color: "#00FF00"
            }, {
                x: 500,
                y: -3,
                color: "#FF0000"
            }, {
                x: 600,
                y: 5,
                color: "#00FF00"
            }]
        }]
    });
});

我希望第一个栏在x轴上从0水平延伸到500.

换句话说，我希望每个条形图从当前x值开始并以下一个x值结束。

我该怎么做？

Answer 1

您要查找的系列属性为connectNulls

据我所知，此选项仅适用于区域和折线图，不再适用于柱形图或条形图

我建议您将图表类型更改为面积图并使用文档here中提到的connectNulls选项

为了满足您在柱形图本身中的要求，您需要在系列代码段中调整您输入高图表的数据

series: [{
        name: 'John',
        data: [{
            x: 0,
            y: 5,
            color: "#00FF00"
        },{
            x: 100,
            y: 5,
            color: "#00FF00"
        },{
            x: 200,
            y: 5,
            color: "#00FF00"
        },{
            x: 300,
            y: 5,
            color: "#00FF00"
        },{
            x: 400,
            y: 5,
            color: "#00FF00"
        }, {
            x: 500,
            y: -3,
            color: "#FF0000"
        }, {
            x: 600,
            y: 5,
            color: "#00FF00"
        }]
    }]

这将解决您的问题。看到工作小提琴http://jsfiddle.net/bmk71a8r/3/

对于这种方法，您需要编写额外的代码来格式化数据

美好的一天

使Highcharts柱形图条宽度与线性x轴的强制要求一样宽

1 个答案: