私は、毎日の販売数と総収入を表示する必要があるmultiChart
inを持っています。angular-nvd3
<nvd3 options="options" data="data"></nvd3>
オプションとデータは次のとおりです。
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 90,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
useInteractiveGuideline: true,
xAxis: {
axisLabel: "Day",
tickFormat: function(d){
return d3.time.format('%b %d')(new Date(d));;
}
},
yAxis1: {
axisLabel: "Orders",
tickFormat: d3.format('d')
},
yAxis2: {
axisLabel: "Income (Lari)",
tickFormat: function(d){
return Math.round(d / 100) + " GEL";
}
}
}
};
$scope.data = [{
yAxis: 2,
type: 'line',
key: "Income",
values: data.map(function (item) {
return {
series: 0,
x: new Date(item._id.year, item._id.month, item._id.day),
y: item.total
};
})
},
{
yAxis: 1,
key: "Orders",
type: 'line',
values: data.map(function (item) {
return {
series: 1,
x: new Date(item._id.year, item._id.month, item._id.day),
y: item.count
};
})
}];
変換前のデータ項目:
{
"_id": {
"year": 2015,
"month": 11,
"day": 26
},
"total": 1078,
"count": 1
},
最初の行にカーソルを合わせるとツールチップが表示され、Y 値が表示されますが、2 行目はマウスオーバーで完全に無視されます。最初の行を無効にすると、コンソールに次のエラーが表示されます。
d3.js:5948 Error: Invalid value for <g> attribute transform="translate(NaN,NaN)"
d3.transform @ d3.js:5948d3
interpolateTransform @ d3.js:6049
(anonymous function) @ d3.js:8754
(anonymous function) @ d3.js:8945
d3_class.forEach @ d3.js:341
start @ d3.js:8944
schedule @ d3.js:8912
d3_timer_mark @ d3.js:2165
d3_timer_step @ d3.js:2146
また、ツールチップが大きなオフセットで表示されるため、ウィンドウが水平方向にオーバーフローします。極端にズームアウトすると観察できます。