Диаграммы Apex в Angular 9

У меня есть проблема с использованием диаграмм вершин в angular 9, по сути, я могу видеть диаграмму (линейную диаграмму), когда я издеваюсь над данными, как на первом снимке экрана, но я не могу получить данные из REST API, я имею в виду диаграмму исчезает. фиктивные данные

Это метод, содержащий диаграмму:

      drawGraph(){
    this.projectService.getLineChartData(this.getID()).then((data) =>{
      
      for(let i = 0; i<data.resourceListSize; i++){
    
      this.chartOptions = {
        series: [
          {
            name: "data",
            data: [28, 29, 33, 36, 32, 32, 33]
          },
          {
            name: "Low - 2013",
            data: [12, 11, 14, 18, 17, 13, 13]
          }
        ],
        chart: {
          height: 350,
          type: "line",
          dropShadow: {
            enabled: true,
            color: "#000",
            top: 18,
            left: 7,
            blur: 10,
            opacity: 0.2
          },
          toolbar: {
            show: false
          }
        },
        colors: ["#77B6EA", "#545454"],
        dataLabels: {
          enabled: true
        },
        stroke: {
          curve: "smooth"
        },
        title: {
          text: "Average High & Low Temperature",
          align: "left"
        },
        grid: {
          borderColor: "#e7e7e7",
          row: {
            colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
            opacity: 0.5
          }
        },
        markers: {
          size: 1
        },
        xaxis: {
          categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
          title: {
            text: "Month"
          }
        },
        yaxis: {
          title: {
            text: "Temperature"
          },
          min: 5,
          max: 40
        },
        legend: {
          position: "top",
          horizontalAlign: "right",
          floating: true,
          offsetY: -25,
          offsetX: -5
        }
      };
    }
  })
  }

Любая помощь будет оценена по достоинству! Спасибо


typescript angular html apexcharts
person Gabriele Claudio Baroni    schedule 02.07.2020    source источник
comment
я думаю, вы можете сначала отфильтровать данные, которые вы хотите представить на диаграмме, и отобразить диаграмму с данными, доступными из API.   -  person Banny    schedule 08.08.2020

Ответы (1)


arrow_upward
0
arrow_downward

Шаг 1. задайте конфигурацию без данных, как показано ниже (минимальная конфигурация)

this.chartOptions = {
 series: [],
 chart: {
     height: 350,
     type: "line"
 },

 xaxis: {}

}

Шаг 2: Данные из ответа API и установка переменной chartoptions,

  this.chartOptions.series=[{
         name: "data",
         data: [28, 29, 33, 36, 32, 32, 33]
     }, {
         name: "Low - 2013",
         data: [12, 11, 14, 18, 17, 13, 13]
     }
 ];
 
 this.chartOptions.xaxis=
 {
     categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
 }
person Rajeev    schedule 10.09.2020