Question

这是从HighCharts示例派生而来，并显示了包含多个系列的列范围图表。

每列相隔10个单位。我想调整列宽以使它们是连续的，即每个都是10个单位宽。

我该怎么做？

我将groupPadding设置为0，以便每个系列的列都正确对齐。我希望我可以使用pointRange将宽度设置为10轴单位，如下所示，但这没有效果：

    plotOptions: {
        columnrange: {
            groupPadding: 0.5,
            pointRange: 10,
            ...

当然我可以使用pointWidth来做，但为此我需要知道如何从轴单位转换为像素：

    plotOptions: {
        columnrange: {
            groupPadding: 0.5,
            pointWidth: 20, // I want this to be the number of pixels for 10 axis units
            ...

更新

我在这里创建了jsFiddle的更新版本：http://jsfiddle.net/rv6Wt/6/

var chart = $('#container').highcharts(options, function(chart) {
        var width = chart.xAxis[0].width;
        var max = chart.xAxis[0].max;
        var min = chart.xAxis[0].min;
        var colWidth = (width + max - min - 1) / (max - min)
        options.plotOptions.columnrange.pointWidth = colWidth;
        var chart = $('#container').highcharts(options).highcharts();
}).highcharts();

在此更新中，我尝试使用kludge，我生成图表一次，根据生成的图表的宽度/最小值/最大值计算所需的列宽，然后再次生成。

从性能角度来看并不是很令人满意，它仍然没有给出我想要的结果：我希望每列大约10轴单位宽，即它们或多或少是连续的，但这不是虽然它们比第一个样本更广泛。

更新2

在Mark的评论的帮助下，我更正了这个更新的jsFiddle中的kludgey解决方案http://jsfiddle.net/rv6Wt/10/

此更新版本还支持缩放（垂直）x轴 - 对此示例无用，但它将适用于我的目标场景，它将包含更多列。

此解决方案的两个问题是：

效果：图表生成两次。
更重要的是，当我垂直缩放时，不会重新调整列宽。在我的目标场景中，我将有大量的精简列，并且当我缩放时，我希望它们缩放（变得更粗）。为了实现这一点，我最好以轴单位（pointRange）而不是像素（pointWidth）指定列宽，以便在轴缩放时自动调整大小。

Answer 1

设置grouping和pointPadding，请参阅：http://jsfiddle.net/rv6Wt/11/

例如：

    plotOptions: {
        columnrange: {
            grouping: false,
            pointPadding: -0.35
        }
    },

另一个选项，您可以尝试使用计算的pointWidth，但然后使用series.update({ pointWidth: X})而不是重新创建图表。

如何为具有多个系列的columnRange图表设置列宽

1 个答案: