時間:分のような時間形式でx軸の書式を設定する必要がありますが、ラベルは年/月/日時間:分:秒でより完全である必要がありますx軸にラベルをカスタマイズするnvd3折れ線グラフangularjs
これを行う方法はありますか?私はxAxisにオプションtickFormatを使用していますが、x軸とラベルに同じ情報が表示されます...
どのようにするのですか?私は "tickValues"について何かを読んだが、これを理解することはできない。
マイコード:
var rangeSelector = document.getElementsByTagName('select')[0]; //1h 24h 1w custom
controllerScope.statusViewChartOptions = {
chart: {
type: 'lineChart',
height: 600,
staggerLabels: true,
margin: {
top: 20,
right: 20,
bottom: 70,
left: 30
},
forceY: [0],
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
useInteractiveGuideline: true,
duration: 500,
noData: 'No data to show in the specified range',
xAxis: {
axisLabel: 'Hours',
axisLabelDistance: 20,
showMaxMin: false,
tickFormat: function (d) {
if(rangeSelector.value == "1h"){
return d3.time.format("%H:%M")(new Date(d));
} else if(rangeSelector.value == "24h"){
return d3.time.format("%H:%M")(new Date(d));
} else if(rangeSelector.value == "1w"){
return d3.time.format("%d-%m")(new Date(d));
} else if(rangeSelector.value=="custom"){
return d3.time.format("%d %b")(new Date(d));
}
},
rotateLabels: -45
},
yAxis: {
showMaxMin: false,
tickFormat: function (d) {
return d3.format('d')(d);
}
},
title: {
enable: true,
text: 'Status'
},
dispatch: {
stateChange: function (e) {
console.log("stateChange");
$scope.api.refresh();
},
changeState: function (e) {
console.log("changeState");
$scope.api.refresh();
},
tooltipShow: function (e) {
console.log("tooltipShow");
$scope.api.refresh();
},
tooltipHide: function (e) {
console.log("tooltipHide");
$scope.api.refresh();
}
}
}
};
};
これは私が唯一のラインを持っているとき..私は2つの行を持っていると理解して...両方のケースのためにこれを作成する方法を理解カント作品? –
複数のグラフを含む累積グラフがあることを意味しますか?コードを共有できますか?上記の例は、1つの折れ線グラフを示しています。 –
私はオンラインで2行、オフラインで2行の折れ線グラフを持っています –