Highcharts 条形图后面有轮廓的水平条形图

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

我们不希望添加新的系列，因为灰色背景不代表我们应用程序中的任何数据，它纯粹是一种美学选择。为满足外观要求而添加数据系列感觉像是一种黑客行为。此外，现在我们必须自己管理轴的最大值，而不是让海图帮我们算出它

这是否可能在高图表中实现，或者我们是否坚持采用新的系列方法

我没有一个可以直接将代码取出的状态，但是让我们从HighCharts示例开始。我相信我能适应我们这里使用的任何技术

$(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]
        }]
    });
});

这会让你非常接近。它使用highcharts圆角插件，并将序列解组，使它们重叠。你可以根据自己的喜好修改它

要使用插件获得圆角，请将以下内容添加到系列中：

borderRadiusTopLeft: 8,
borderRadiusTopRight: 8

为了使它们不重叠

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

这会让你非常接近。它使用highcharts圆角插件，并将序列解组，使它们重叠。你可以根据自己的喜好修改它

要使用插件获得圆角，请将以下内容添加到系列中：

borderRadiusTopLeft: 8,
borderRadiusTopRight: 8

为了使它们不重叠

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

---

还有另一种解决方案，而不是使用级数。事实上，还有三种选择，但都不容易，因此：

• 使用

  plotBands

  -仅适用于固定数量的条形图和固定高度的图表：
• 使用渲染器绘制背景矩形，请参见-但您需要手动查找所有值x/y/width/height来绘制此类矩形
• 环绕绘图点不仅可以绘制条形图，还可以绘制灰色图形，演示：

我认为第三种选择最适合你，但比其他任何一种都需要更多的海图核心知识

---

关于yAxis的最小/最大值，您不必计算任何东西。只需创建第二个yAxis，它不会连接到第一个yAxis，设置

maxPadding:0

，并将该虚拟序列链接到第二个yAxis。该系列中第二个yAxis的所有值可以是任何值（但必须相同！）。

除了使用系列，还有另一种解决方案。事实上，还有三种选择，但都不容易，因此：

• 使用

  plotBands

  -仅适用于固定数量的条形图和固定高度的图表：
• 使用渲染器绘制背景矩形，请参见-但您需要手动查找所有值x/y/width/height来绘制此类矩形
• 环绕绘图点不仅可以绘制条形图，还可以绘制灰色图形，演示：

我认为第三种选择最适合你，但比其他任何一种都需要更多的海图核心知识

---

关于yAxis的最小/最大值，您不必计算任何东西。只需创建第二个yAxis，它不会连接到第一个yAxis，设置

maxPadding:0

，并将该虚拟序列链接到第二个yAxis。该系列中第二个yAxis的所有值都可以是任何值（但必须是相同的！）。

是否在Highcharts中完成了大部分操作？如果是这样的话，我们可以得到一个JS小提琴或至少看到一些代码？你说的深灰色背景是指栅栏后面的背景，还是整个图表区域的背景？请详细说明。（是的，您可能可以在Highcharts中实现这一点）你所做的是显示一个堆叠的条形图，不管这个想法是假装它“落后”还是不落后。所以…解决方法就是添加一个系列来填充堆叠部分的其余部分。这不是黑客，这是答案……当然这是一种看待它的方式，这是我没有正确沟通的错误。深灰色背景区域根本不受数据驱动。我们使用API调用填充模型对象，该调用驱动图表的红/白系列，而不是灰色背景。将它添加到javascript中的实际数据之上是一种黑客行为。如果我们选择这条路线，我们会遇到诸如必须手动定义轴最大值之类的问题。我希望有一个更简单的方法，比如point.background，或者在绘图选项下我缺少的东西。如果这是唯一的方法，我们将使用它。编辑问题。很好的反馈，我对我们的意图不够清楚。你大部分都是用Highcharts完成的吗？如果是这样的话，我们可以得到一个JS小提琴或至少看到一些代码？你说的深灰色背景是指栅栏后面的背景，还是整个图表区域的背景？请详细说明。（是的，您可能可以在Highcharts中实现这一点）你所做的是显示一个堆叠的条形图，不管这个想法是假装它“落后”还是不落后。所以…解决方法就是添加一个系列来填充堆叠部分的其余部分。这不是黑客，这是答案……当然这是一种看待它的方式，这是我没有正确沟通的错误。深灰色背景区域根本不受数据驱动。我们使用API调用填充模型对象，该调用驱动图表的红/白系列，而不是灰色背景。将它添加到javascript中的实际数据之上是一种黑客行为。如果我们选择这条路线，我们会遇到诸如必须手动定义轴最大值之类的问题。我希望有一个更简单的方法，比如point.background，或者在绘图选项下我缺少的东西。如果这是唯一的方法，我们将使用它。编辑问题。反馈很好，我对我们的意图不够清楚。回答很好，并不是我们所希望的解决方案。我投了赞成票，但只会将其标记为添加一个系列的答案是最好的或唯一的方法。谢谢。你也可以使用，但它似乎更复杂。答案很好，并不是我们所希望的解决方案。我投了弃权票，但只会给它打分