Chart JS Angular как отобразить список данных в линейном графике

Я впервые использую графики в программировании, так что извините, если это действительно просто и я просто идиот. Итак, я создал очень простой график, используя ChartJS в angular.

loadChart(): void {
new Chart(this.chart,{
  type:'line',
  data: {
    datasets: [
      {
        data:data:[30, 60, 40, 50, 40, 55, 85, 65, 75, 50, 70],
        label:"Series 1",
        backgroundColor: '#007bff',
        tension: 0.3,
      }
    ],
    labels:['17th',
            '18th',
            '19th',
            '20th',
            '21st',
            '22nd',
            '23rd',
            '24th',
            '25th',
            '26th',
          ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      y: {
        beginAtZero: true,
      }
    }
  }
})
}

У меня есть метод get в моем rest api, который отвечает с кучей данных, таких как эти обнаружения.

[
{
    "DetectionId": 2,
    "CityId": 2,
    "TimeUpdated": "2018-11-20T21:58:44.767594Z",
    "FPercent": 22,
},
{
    "DetectionId": 3,
    "CityId": 2,
    "TimeUpdated": "2016-11-20T21:58:44.767594Z",
    "Percent": 22,
}
]

Как добавить эти данные на график, чтобы каждое обнаружение отображалось в виде точки на линейном графике. В идеале я хотел бы построить процент по оси Y и время обновления по оси x. Любая помощь или совет будут очень признательны. Я попробовал несколько руководств, но пока ничего не получилось.

Также есть ли способ добавить angular Click() к точкам, чтобы я мог использовать его для перехода между данными.

Спасибо, что нашли время прочитать!

Вам нужно составить карту [data] и [type] из данных, которые вы получаете из API.

  <canvas
    baseChart
    [data]="dataFromApi"
    [type]="chartType"
    >
  </canvas>

Поскольку вы не указали, какой тип графика вы используете, я покажу пример для привязки DoughnutChart

Для того чтобы сопоставить данные из API, следующие за типом диаграммы, нам необходимо знать, какие типы мы используем. Если вы посмотрите на тип документации ChartData<'doughnut'>, то увидите, что он типизирован следующим образом

export interface ChartData<
  TType extends ChartType = ChartType,
  TData = DefaultDataPoint<TType>,
  TLabel = unknown
> {
  labels?: TLabel[];
  datasets: ChartDataset<TType, TData>[];
}

Из этого я знаю, что я могу отобразить свой ответ следующим образом

getPhases$(): Observable<[ChartData<'doughnut'>, IPhasesResponse]> {
    return this._phasesService.getPhases$().pipe(
      take(1),
      map((response: IPhasesResponse) => {
        const doughtnutChartLabels = response.results.map(
          (phase: IPhaseResults) => phase.name
        );
        const doughtnutChartDatasets = response.results.map(() => 100);

        const doughnutChartData: ChartData<'doughnut'> = {
          labels: doughtnutChartLabels,
          datasets: [{ data: [...doughtnutChartDatasets] }],
        };
        return [doughnutChartData, response];
      })
    );
  }

Сделайте ваш график интерактивным с помощью событий

Для второй части, чтобы сделать график интерактивным, необходимо использовать события. Вы можете связать события с chartjs с помощью методов chartClick и chartHovered.

  <canvas
    baseChart
    [data]="doughnutChartData"
    (chartClick)="chartClicked($event)"
    (chartHovered)="chartHovered($event)"
    [type]="doughnutChartType"
  >
  </canvas>

И внутри вашего .ts файла

  public chartClicked({ event, active }: { event: ChartEvent, active: {}[] }): void {
    console.log(event, active);
  }

  public chartHovered({ event, active }: { event: ChartEvent, active: {}[] }): void {
    console.log(event, active);
  }
Вернуться на верх