1

デフォルトの折れ線グラフと棒グラフを使用してグラフを作成しようとしていますが、棒グラフで 2 つ以上のストリームを使用したいのですが、可能ですか?

現在、これを実行しようとすると、グラフの効果に問題が発生したため、バーのホバー バルーンを適切に表示できず、常に 1 つのストリームのデータのみを表示します。しかし、主な問題は、1970 年代の日付を表示する x 軸の日付です。バーの 2 番目のストリームを削除すると、日付が適切に表示されます。 現在のチャート

この種のチャートを成功させようとした人はいますか?

編集

フィドルの追加:

2列のストリームと乱雑な日付をいじる

1 つの列ストリームと OK 日付だけをいじる

私はこの種のグラフを呼んでいます：

linePlusBarChart()
4

1 に答える 1

1

日付の問題は、データにタイムスタンプ (つまり秒単位) が含まれていることですが、Javascript はミリ秒を想定しています。これは、値に 1000 を掛けることで簡単に修正できます。

series.values = series.values.map(function (d) {
            return {
                x: d[0]*1000,
                y: d[1]
            }
});

ツールチップの問題は、実際には NVD3 のバグです。このように使用することは意図されていません。問題mouseoverは、データの最初の項目が必要なものを表していると想定するハンドラーに要約されます。あなたのケースでは、2 を法とするデータポイント番号でアイテムを選択することでこれを修正できます (バーが 2 つあるため)。

.on('mouseover', function(d,i) {
        d3.select(this).classed('hover', true);
        dispatch.elementMouseover({
            point: d,
            series: data[i%2],
            pos: [x(getX(d,i)), y(getY(d,i))],
            pointIndex: i,
            seriesIndex: i%2,
            e: d3.event
        });
      })

ただし、これは正確に 2 つのバー シリーズに対してのみ機能します。ここで変更された NVD3 コードで jsfiddle を更新しました。

于 2013-07-03T19:41:14.100 に答える