0

グラフの生成に NVD3 チャートを使用しています。X 軸に沿って値と日付範囲の値を変更およびカスタマイズしたいと考えていました。

現在、グラフはグラフによって生成されたデフォルト値を使用していますが、X 軸の値をカスタマイズできるようにしたいと考えています。

私はブートストラップ nvd3 の例を見ています: http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/ ただし、例から (ケースに示されているようにの「過去 30 日間」)。

よくわかりませんが、x ラベルを変更する方法と場所を変更して、代替ではなく連続させることができますか?

例: 「過去 30 日間」の例では、x 軸に次のように表示されます。

ここに画像の説明を入力

グラフを次のようにカスタマイズするにはどうすればよいですか:

6 月 24 日 6 月 25 日 6 月 26 日 6 月 27 日 ---- x 軸に沿って? 達成する方法はありますか？

ありがとう！

編集：：：：：：：：

これがフィドルです：

http://jsfiddle.net/dxkmtg5j/2/

chart.xAxis.tickFormat(function(d) {
                        return d3.time.format.utc(dataFormat)(new Date(d));
                });

以下は、「x」軸にラベル付けされたo / pです

ここに画像の説明を入力

申し訳ありませんが、x 軸のラベルの処理をどこから開始すればよいか分からないため、これが提示できる唯一のコードです。「dateRangePciker.js」ファイルを変更し、その場所でコードを変更しようとしました。これでは十分ではないかもしれませんが、実装の高レベルのアイデアを得ることができれば、私の側から試すことができます.

ありがとう

4

1 に答える 1

0

このコードを追加して日付を作成してみてください

chart.xAxis.tickFormat(function (d) {            
        var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
        if (dx > 0) {
            console.log(dx);
            return d3.time.format('%X')(new Date(dx))
        }
         return null;
    }).axisLabel("direction").showMaxMin(false);
于 2014-12-02T12:35:24.903 に答える