我使用angular-nvd3指令制作自定义折线图显示特定时段范围内的来宾数量,如下所示:
这是我的实施代码,只有直线:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
tooltips: false,
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: false,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
axisLabel: 'Time (ms)'
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: 30
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
}
};
$scope.data = sinAndCos();
/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
}
//Line chart data should be sent as an array of series objects.
return [
{
values: [{x:7,y:100},{x:8,y:40},{x:9,y:70}],
key: 'Sine Wave', //key - the name of the series.
color: '#ff7f0e', //color - optional: choose your own line color.
strokeWidth: 2
},
{
values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
key: 'Cosine Wave',
color: '#2ca02c'
},
{
values: [{x:7,y:300},{x:8,y:240},{x:9,y:270},{x:10,y:220},{x:11,y:280}],
key: 'Another sine wave',
color: '#7777ff'
}
];
};
});
&#13;
以下是这方面的内容:http://plnkr.co/edit/lBKFld?p=preview
任何人都可以提供一些让我非常欣赏的帮助。
由于
答案 0 :(得分:0)
{
values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
key: 'Cosine Wave',
color: '#2ca02c',
classed: 'dashed' // <-- Now use CSS to make the line dashed
}
STYLE!!!
.dashed {
stroke-dasharray: 5,5;
}
&#13;