angular-nvd3,scatterChart和bar怎么结合?
angular-nvd3, how to combine scatterChart and bar?
我想使用条形图和散点图制作多图,要求是在每个条形图上方显示一个点代表一些数据。
我已经尝试了很多东西,但其中 none 行得通,这是我当前的代码:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
}
}
};
$scope.data = [
{
key: 'X',
type: 'scatterChart',
values: [
{ x: 1, y: 125, size: Math.random(), shape: 'circle' },
{ x: 2, y: 125, size: Math.random(), shape: 'circle' },
{ x: 3, y: 140, size: Math.random(), shape: 'circle' }
],
yAxis: 1
},
{
key: 'Y',
type: 'bar',
values: [
{x:1, y:109, label:'C2.1'},
{x:2, y:102, label:'C2.2'},
{x:3, y:105, label:'C2.3'}
],
yAxis: 1
},
{
key: 'Z',
type: 'line',
values: [
{ x: 1, y: 115 },
{ x: 2, y: 120 },
{ x: 3, y: 130 }
],
yAxis: 1
}
];
条形图和折线图显示正确,但代表条形上方的点的散点图显示不正确。
非常感谢您的帮助
类型 "scatterChart" 在 angular-nvd3 中不存在。您必须指定类型 "scatter".
$scope.data = [
{
key: 'X',
type: 'scatter',
values: [
{ x: 1, y: 125, size: Math.random(), shape: 'circle' },
{ x: 2, y: 125, size: Math.random(), shape: 'circle' },
{ x: 3, y: 140, size: Math.random(), shape: 'circle' }
],
yAxis: 1
}
这是一个有效的 plunker 多图表,带有条形图和散点图。
希望能解决您的请求:)
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
useInteractiveGuideline: true,
duration: 500,
x: function(d){return d.x;},
y: function(d){return d.y;},
xAxis: {
axisLabel: 'Months',
showMaxMin: true,
tickFormat: function(d) {
return d3.format(',.f')(d);
}
},
yAxis: {
axisLabel: 'Occupancies',
axisLabelDistance: -20,
tickFormat: function(d) {
return d3.format(',.1f')(d);
}
}
}
};
$scope.data = $scope.data = [{
"key": "occ_n",
"values": [{
"x": 1,
"y": 0
}, {
"x": 2,
"y": 0
}, {
"x": 3,
"y": 0
}, {
"x": 4,
"y": 62
}, {
"x": 5,
"y": 4519
}, {
"x": 6,
"y": 7911
}, {
"x": 7,
"y": 14631
}, {
"x": 8,
"y": 15745
}, {
"x": 9,
"y": 3245
}, {
"x": 10,
"y": 0
}, {
"x": 11,
"y": 0
}, {
"x": 12,
"y": 0
}],
"type": "bar",
"yAxis": 1
}, {
"key": "occ_n_1",
"values": [{
"x": 1,
"y": 0
}, {
"x": 2,
"y": 0
}, {
"x": 3,
"y": 0
}, {
"x": 4,
"y": 726
}, {
"x": 5,
"y": 6000
}, {
"x": 6,
"y": 8205
}, {
"x": 7,
"y": 14596
}, {
"x": 8,
"y": 15129
}, {
"x": 9,
"y": 3396
}, {
"x": 10,
"y": 0
}, {
"x": 11,
"y": 0
}, {
"x": 12,
"y": 0
}],
"type": "scatter",
"yAxis": 1
}];
});
我想使用条形图和散点图制作多图,要求是在每个条形图上方显示一个点代表一些数据。
我已经尝试了很多东西,但其中 none 行得通,这是我当前的代码:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
}
}
};
$scope.data = [
{
key: 'X',
type: 'scatterChart',
values: [
{ x: 1, y: 125, size: Math.random(), shape: 'circle' },
{ x: 2, y: 125, size: Math.random(), shape: 'circle' },
{ x: 3, y: 140, size: Math.random(), shape: 'circle' }
],
yAxis: 1
},
{
key: 'Y',
type: 'bar',
values: [
{x:1, y:109, label:'C2.1'},
{x:2, y:102, label:'C2.2'},
{x:3, y:105, label:'C2.3'}
],
yAxis: 1
},
{
key: 'Z',
type: 'line',
values: [
{ x: 1, y: 115 },
{ x: 2, y: 120 },
{ x: 3, y: 130 }
],
yAxis: 1
}
];
条形图和折线图显示正确,但代表条形上方的点的散点图显示不正确。
非常感谢您的帮助
类型 "scatterChart" 在 angular-nvd3 中不存在。您必须指定类型 "scatter".
$scope.data = [
{
key: 'X',
type: 'scatter',
values: [
{ x: 1, y: 125, size: Math.random(), shape: 'circle' },
{ x: 2, y: 125, size: Math.random(), shape: 'circle' },
{ x: 3, y: 140, size: Math.random(), shape: 'circle' }
],
yAxis: 1
}
这是一个有效的 plunker 多图表,带有条形图和散点图。 希望能解决您的请求:)
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin: {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
useInteractiveGuideline: true,
duration: 500,
x: function(d){return d.x;},
y: function(d){return d.y;},
xAxis: {
axisLabel: 'Months',
showMaxMin: true,
tickFormat: function(d) {
return d3.format(',.f')(d);
}
},
yAxis: {
axisLabel: 'Occupancies',
axisLabelDistance: -20,
tickFormat: function(d) {
return d3.format(',.1f')(d);
}
}
}
};
$scope.data = $scope.data = [{
"key": "occ_n",
"values": [{
"x": 1,
"y": 0
}, {
"x": 2,
"y": 0
}, {
"x": 3,
"y": 0
}, {
"x": 4,
"y": 62
}, {
"x": 5,
"y": 4519
}, {
"x": 6,
"y": 7911
}, {
"x": 7,
"y": 14631
}, {
"x": 8,
"y": 15745
}, {
"x": 9,
"y": 3245
}, {
"x": 10,
"y": 0
}, {
"x": 11,
"y": 0
}, {
"x": 12,
"y": 0
}],
"type": "bar",
"yAxis": 1
}, {
"key": "occ_n_1",
"values": [{
"x": 1,
"y": 0
}, {
"x": 2,
"y": 0
}, {
"x": 3,
"y": 0
}, {
"x": 4,
"y": 726
}, {
"x": 5,
"y": 6000
}, {
"x": 6,
"y": 8205
}, {
"x": 7,
"y": 14596
}, {
"x": 8,
"y": 15129
}, {
"x": 9,
"y": 3396
}, {
"x": 10,
"y": 0
}, {
"x": 11,
"y": 0
}, {
"x": 12,
"y": 0
}],
"type": "scatter",
"yAxis": 1
}];
});