angular-chart.js 阶梯线

Question

我正在使用 angular-chart.js 使用来自我的后端的数据动态生成一些图表。

我还没有找到相关文档，而且到目前为止似乎也没有人问过 如何创建带有阶梯线的图表，就像 chart.js 的特点一样here。

我还没有找到关于这是否受支持的信息。

我试过的是：

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>

和 JS：

    $scope.data = {
        type: 'line',
        datasets: [{
            steppedLine: true,
            data: countdata,
            fill: false
        }]
    }
    $scope.labels = countlabels;

这不起作用，图表不显示。如果我只传递 countdata 数组，那么它会起作用：$scope.data = countdata;

Answer 1

这种类型的图表得到很好的支持。

它不起作用的原因是，您以不适当的方式配置图表。 $scope.data 应该是数据集 (s) 的数组，而不是对象，这就是当您设置 $scope.data = countdata

时它起作用的原因

要为数据集(s) 添加其他属性，您需要像这样在 $scope.datasetOverride 中设置这些属性...

$scope.datasetOverride = [{
   steppedLine: true,
   fill: false
}];

这是一个working example on plunker

Answer 2

    lineChartData: ChartDataSets[] = [
    { data: [85, 72, 78, 75, 77, 75], label: 'Crude oil prices' },
  ];

  lineChartLabels: Label[] = ['01.01.2021', '05.01.2021', '15.01.2021', '25.01.2021', '27.01.2021', '31.01.2021'];


  lineOptions: ChartLineOptions= {
    // stepped:true,
  }

  elementChartOptions: ChartElementsOptions = {
    line: this.lineOptions,
  };

  lineChartOptions = {
    // responsive: true,
    steppedLine: true,
    fill: false,
    elements: this.elementChartOptions
  };



  lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,255,0,0.28)',
    },
  ];

  lineChartLegend = true;
  lineChartPlugins = [];
  lineChartType = 'line';

chartlineoptions 应该设置为 steped 并且这个配置应该添加 cascaded。之后，options应该在HTML边

给出[options]

<div class="chart-wrapper">
            <canvas baseChart [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions"
                [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
                [plugins]="lineChartPlugins">
            </canvas>
 </div>

angular-chart.js 阶梯线

Stepped Line with angular-chart.js

javascript

angularjs

chart.js

angular-chart