1

见：http: //jsfiddle.net/rv6Wt/4/

这源自 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

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

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

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

  • 性能：图表生成两次。

  • 更重要的是，垂直缩放时不会重新调整列宽。在我的目标场景中，我将有大量的细列，当我缩放时，我希望它们缩放（变得更厚）。为了实现这一点，理想情况下，我希望以轴单位（pointRange）而不是像素（pointWidth）指定列宽，以便它们在轴缩放时自动调整大小。

4

1 回答 1

3

设置grouping和pointPadding，见：http: //jsfiddle.net/rv6Wt/11/

例如：

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

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

于 2013-06-24T11:58:35.133 回答