1

参照: http://jsfiddle.net/rv6Wt/4/

これは、HighCharts サンプルから派生したもので、複数のシリーズを含む縦棒グラフを示しています。

各列は 10 単位離れています。列幅が連続するように、つまりそれぞれが 10 単位の幅になるように、列幅を調整したいと考えています。

これどうやってするの？

groupPadding各シリーズの列が適切に配置されるように、0に設定しました。次のように使用して幅を 10 軸単位に設定できることを望みましpointRangeたが、これは効果がありません。

    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();

この更新では、グラフを一度生成し、生成されたグラフの幅/最小/最大に基づいて目的の列幅を計算してから、再度生成します。

パフォーマンスの観点からはあまり満足のいくものではなく、それでも私が望む結果が得られません: 各列は約 10 軸単位の幅になると予想していました。最初のサンプルより幅が広くなっています。

更新 2

Mark のコメントの助けを借りて、この更新された jsFiddle http://jsfiddle.net/rv6Wt/10/の kludgey ソリューションを修正しました。

この更新されたバージョンでは、(垂直) x 軸のズームもサポートされています。このサンプルには役に立ちませんが、より多くの列を持つターゲット シナリオには使用できます。

このソリューションには、次の 2 つの問題があります。

  • パフォーマンス: チャートは 2 回生成されます。

  • さらに重要なのは、縦方向にズームしても列幅が再調整されないことです。私のターゲット シナリオでは、多数の細い列があり、ズームすると、それらをスケーリング (太くなる) させたいと考えています。これを実現するには、列幅をピクセル (pointWidth) ではなく軸単位 (pointRange) で指定して、軸がズームされると自動的にサイズが変更されるようにするのが理想的です。

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 に答える