Question

我正在使用angular-chart.js这是我页面中chart.js的扩展名来创建多行图表。

在我的多线图表中，每一行可能有不同的数据点集。例如，图表有2行A＆amp; B.然后x轴标签将固定＃个月 - 从1月到3月。 A行可以有月和1月的数据点。 2月和B行可以有1月和1月的数据点。游行。我无法使用angularjs使其工作，但根据this，可以使用chartjs。

示例代码： Plnkr Link

<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);
});

 }
]);

AngularJS ChartJS - 带有差异编号的多线。每行的数据点数

0 个答案: