AngularJS ChartJS - Multiline с разностным номером. точек данных для каждой строки
Я использую angular-chart.js, который является расширением на chart.js на моей странице, для создания многострочного графика.
В моей многострочной диаграмме каждая строка может иметь различный набор точек данных. Например, диаграмма имеет 2 строки A и B. Тогда метки оси x будут фиксированными, # как месяцы - с января по март. Линия A может иметь точки данных за январь и февраль, а линия B может иметь точки данных за январь и март. Я не могу заставить его работать с помощью angularjs, но в соответствии с этим, это возможно с помощью chartjs.
Пример кода: ссылка Plnkr
<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);
});
}
]);