AngularJS ChartJS-多行,每条线的数据点数量不同
我正在使用页面中的扩展名创建多行图表 在我的多行图表中,每条线可能有不同的数据点集。例如,图表有两条线A和B。然后x轴标签将是固定的#如月份-1月至3月。线A可以有一月和二月的数据点,线B可以有一月和三月的数据点。我无法使用angularjs使其正常工作,但据我所知,使用chartjs是可能的 示例代码:AngularJS ChartJS-多行,每条线的数据点数量不同,angularjs,chart.js,angular-chart,Angularjs,Chart.js,Angular Chart,我正在使用页面中的扩展名创建多行图表 在我的多行图表中,每条线可能有不同的数据点集。例如,图表有两条线A和B。然后x轴标签将是固定的#如月份-1月至3月。线A可以有一月和二月的数据点,线B可以有一月和三月的数据点。我无法使用angularjs使其正常工作,但据我所知,使用chartjs是可能的 示例代码: <body ng-app="DashboardApp"> <div ng-controller="MultiLineChartCtrl"> <canvas
<body ng-app="DashboardApp">
<div ng-controller="MultiLineChartCtrl">
<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options" chart-dataset-override="datasetOverride" chart-click="onClick" height="250px"></canvas>
</div>
var dbapp = angular.module('DashboardApp', ['chart.js']);
dbapp.controller('MultiLineChartCtrl', ['$scope',
function($scope) {
$scope.labels = ["January", "February", "March", "April"];
$scope.series = ['Person A', 'Person B'];
$scope.data = [];
$scope.data.push({
labels: ["January", "February", "March"],
data: [4.43, 6.27, 6.74]
});
$scope.data.push({
labels: ["January", "March", "April"],
data: [6.43, 5.27, 7.74]
});
$scope.options = {
limitLines: [{
label: 'Target',
value: 1,
color: 'rgba(255, 0, 0, .9)'
}],
steppedLine: true,
showLines: true,
elements: {
line: {
fill: false,
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Month'
}
}],
yAxes: [{
display: true,
scaleLabel: {
show: true,
labelString: 'Value'
},
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
},
legend: {
display: true,
position: 'top',
fill: false
}
};
$scope.$on('create', function(event, chart) {
var legend = chart.generateLegend();
console.log(legend);
});
}
]);