Ступенчатая линия с angular-chart.js

Question

Я использую angular-chart.js для динамического генерирования некоторых диаграмм с данными из моего бэкэнда.

То, что я не нашел в документации, и никто, кажется, до сих пор не спрашивал, как создать график со ступенчатой ​​линией, такой как chart.js, показывает его здесь.

Я не нашел информации о том, поддерживается ли это еще.

Я попробовал следующее:

<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 должен быть массивом наборов данных, а не объектом, и именно поэтому он работает, когда вы устанавливаете $scope.data = countdata

Чтобы добавить дополнительные свойства для наборов данных, вы должны установить их внутри $scope.datasetOverride вот так...

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

Вот рабочий пример по плункеру

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';

Параметры диаграммы должны быть установлены как пошаговые, и эта конфигурация должна быть добавлена ​​каскадно. После этого должны быть указаны параметры [параметры] на стороне HTML.

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