問題タブ [angular-nvd3]

NVD3 を使用して多数の折れ線グラフを表示していますが、現在表示されている xAxis の最小値と最大値を取得できるようにしたいと考えています。この場合、xAxis は時間値を示します。

凡例ラベルをクリックしてグラフの線の表示を切り替えると、日付範囲が変更されます。legendClicks をリッスンするイベント ハンドラーを追加しましたが、新しくレンダリングされた日付範囲を取得するにはどうすればよいですか?

角度 ( http://krispo.github.io/angular-nvd3/#/ ) にnvd3js を使用しています。タイトルの直後にテキストを追加したいと思います (この場合、タイトルは 98% です)。追加するテキストは「完了」です。ここまではうまくできたのですが、うまくいかなかったようです。これはこれまでの私の plunkr です: http://plnkr.co/edit/KSdnFepUaI4MUCwAQJgP?p=preview

Krispos angular-nvd3を使用して折れ線グラフをレンダリングしています。何らかの理由で、線がチャートの外に表示されるか、日付が間違っています。x 軸はタイム スケールで、最小値と最大値はxDomaindatepicker を使用して設定されます。

グラフを設定するxDomainと、選択した開始日と終了日が x 軸の最小値と最大値として表示されます。ただし、データセットには選択した開始日より前の最小日付があるため、線は時間間隔外にレンダリングされます。この例では、選択された開始日は2015-08-08で、終了日は2015-11-08です。

最小値と最大値を設定するforceX代わりに使用すると、線はチャート グリッド内にレンダリングされます。xDomainただし、この場合、データセットの最小日付は選択した開始日より前であるため、x 軸は2015-08-08ではなく2015-07-07で始まります。以下に図を示します。

これらは、使用される基本的なチャート オプションです。xDomainまたはforceX動的に設定されます。

$scope.chartOptions = { chart: { type: 'lineChart', yDomain: [0,5], xDomain: [moment(data.startDate).valueOf(), moment(data.endDate).valueOf()], useInteractiveGuideline: true, interactiveLayer: { showGuideLine: true }, lines: { },
xScale: d3.time.scale(), xAxis: { showMaxMin: true, rotateLabels: -45, tickFormat: function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); } }, height: 350, margin : { bottom: 100 } } };

適切に機能させるために何らかの方法で範囲を使用する必要がありますか。つまり、選択した開始日と終了日の範囲内でのみデータをレンダリングします。

ご意見ありがとうございます。

複数の線を持つ折れ線グラフを作成したいと考えています。ここで、目標線を点線に変換したいと思います。このような -

これが私のjsonデータです-

これを行うのを手伝ってください。

デフォルトでは、x 軸のスケールは値から計算されます。これにより、隣接する 2 点間の距離が不均一になります。たとえば、 のような値の配列がある場合[1,2,5]、ポイントの x 軸上の距離は異なり、x 軸ラベルには 1,2,3,4,5 などの他の値が含まれます。x 軸に表示される日付の場合、2 つの等しい日付が印刷される場合があり、見栄えが悪くなります。

このプランカーを見てください。ブラウザー ウィンドウを最大化すると、x 軸のラベルが重複していることがわかります (2015 年 2 月 9 日が画面に 2 回表示されるなど)。また、ポイント間の距離も異なります。

どうやって：

1. 重複する x 軸ラベルが存在しないようにしますか?
2. ポイント間の距離は、グラフの幅に基づいて均等に分散されますか (値に基づいてスケーリングされません)?

angular-nvd3 チャート ライブラリの円グラフにスタートアップ アニメーションを追加する必要があります。いくつかの部分にアニメーションを追加することは可能ですが、円グラフのアニメーションを設定できませんでした。