0

いくつかの列を持つハイチャートの縦棒グラフがあります。
フィドル: http://jsfiddle.net/yishaib/emX5T/

設計では、x 軸が最後の列をはるかに超えて右に伸びる必要があります。どうすればそれを行うことができますか？

これは私が目指しているものです：

ここに画像の説明を入力

コーヒースクリプト:

$("#container").highcharts
chart:
  spacingRight: 200
  type : 'column'
  width: 305
  height: 250  

series: [data: [71, 29]]

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0

yAxis:
  min: 0
  title:
    text: ''
  labels:
    enabled: false
  gridLineWidth: 0
4

2 に答える 2

2

EDIT：デフォルトのアイテムを保持したくない場合は、チャートの要件をさらに指定する必要があります。これにより、xAxis を 2 つのデータ ポイントを超えて拡張できます。tickIntervalポイントの幅を調整するには、 、pointWidth、 、およびその他の要素を 1 つ以上組み合わせて使用​​する必要がありますpointInterval。 これは、通常の js のコードにいくつかの変更を加えた、更新された jsFiddle です。

このようなことをしなければなりません。ラベル フォーマッタが機能しないことに注意してください (私はコーヒー スクリプトに詳しくありません) が、基本的な考え方はそこにあります。最初に、表示するカテゴリの数を設定する必要がありますmax: xxxx。これにより、xAxis が拡張されます。次に、おそらくその「5」を非表示にしたいので、ラベルフォーマッター機能を使用する必要があります。

xAxis:
  categories: ['Column A','Column B']      
  tickWidth: 0
  max: 5
  labels:
    formatter: function() {
                if (this.value <> 5) {
                    return this.value;
        }
            }
于 2013-10-22T15:57:24.483 に答える
2

ハイチャートの折れ線グラフでも同様のことを行っていますが、この概念は縦棒グラフにも当てはまります (明示的に試したことはありませんが、他のタイプもあると思います)。解決策は、X 軸にあるカテゴリの数と同じ長さの「非表示のシリーズ」をチャートに作成することに依存しています。

まず、Highcharts オプション オブジェクトでチャートのchart.ignoreHiddenSeriesオプションを true に設定します。次に、シリーズを作成するときに、シリーズのvisibleオプションを false に設定し (または、シリーズを作成するときにhide()を呼び出すこともできます)、シリーズのshowInLegendオプションも false に設定します。

効果を示す jsFiddle は次のとおりです: http://jsfiddle.net/8PpDN/1/。このフィドルは、 API ドキュメントで提供されているchart.ignoreHiddenSeriesの例から分岐しました。

クイック リファレンスとして、フィドルの JavaScript コードを次に示します。非表示の系列データ配列には、xAxis のカテゴリと同じ数の 0 があることに注意してください。

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

x 軸の下にカテゴリ ラベルがあり、スクリーン ショットには表示されないため、現在は要件を完全には満たしていません。その場合、カテゴリ ラベルに空の文字列を指定し、目盛りを完全に削除して ( xAxis オプションのminorTickLengthとtickLengthを 0 に設定)、同じ効果を実現します。

http://jsfiddle.net/BMncj/1/と再びフィドルからの JavaScript コード:

$(function () {
    $('#container').highcharts({
        chart: {
            ignoreHiddenSeries: true,
            type: 'column'
        },
        legend: {enabled:false},
        xAxis: {
            categories: ['Series 1', 'Series 2', '', '', '', '', '', '', '', '', '', ''],
            minorTickLength:0,
            tickLength:0
        },
        series: [
            {data: [100, 60]}, 
            {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false}
        ]
    });
});

ここから、カテゴリの数を調整したり、前述のように使用可能な間隔オプションを調整したりして、x 軸の拡張の長さを操作できます。

これが役立つことを願っています！

于 2013-11-01T14:51:56.457 に答える