Question

我们想使用Highcharts渲染以下图表。除了每个酒吧后面的深灰色背景外，我们已经完成了大部分工作。我们需要它们始终覆盖图表的整个宽度。

我们宁愿不添加新系列，因为灰色背景并不代表我们应用程序中的任何数据，它纯粹是一种美学选择。添加一个数据系列看起来像是一个黑客的感觉感觉要求。此外，现在我们必须自己管理轴，而不是让HighCharts为我们解决这个问题。

在HighCharts中可以做到这一点，还是我们坚持采用新的系列方法？

我没有将代码放在可以将其拉出的状态，但让我们从基于HighCharts示例开始：http://jsfiddle.net/92SFh/。我相信我可以适应我们在这里使用的任何技术。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },

        series: [{
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]
        }]
    });
});

chart

Answer 1

http://jsfiddle.net/92SFh/2/

这应该让你非常接近。它使用highcharts圆角插件并对系列进行取消组合以使它们重叠。您可以根据自己的喜好进行修改。

要使用插件获取圆角，请将其添加到系列中：

borderRadiusTopLeft: 8,
borderRadiusTopRight: 8

并使它们不重叠......

        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                },
                grouping: false
            }
        },

Answer 2

除了使用系列之外，还有另一种解决方案。事实上，还有其他三个选项，其中没有一个是容易的，所以：

使用plotBands - 仅适用于固定数量的条形图和图表的固定高度：http://jsfiddle.net/92SFh/4/
使用渲染器绘制背景值，请参阅docs - 但您需要手动查找所有值x / y / width / height以绘制此类rect。
包装绘图点不仅可以绘制条形，还可以绘制灰色形状，演示：http://jsfiddle.net/92SFh/6/

我认为第三种选择对你来说是最好的，但需要更多关于Highcharts核心的知识。

关于yAxis的最小值/最大值 - 你不必计算任何东西。只需创建第二个yAxis，它不会连接到第一个yAxis，设置maxPadding: 0并将该虚拟系列链接到第二个yAxis。该系列中第二个yAxis的所有值都可以是任何值（但必须相同！）。

与大纲的水平的长条图在酒吧后

2 个答案: