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
}
}
};
適切に機能させるために何らかの方法で範囲を使用する必要がありますか。つまり、選択した開始日と終了日の範囲内でのみデータをレンダリングします。
ご意見ありがとうございます。
