Блог

Я использую Highchart в своем приложении angular.

У меня есть требование отображать сообщение в highchart, если набор данных, возвращаемый API, пуст.

Я попробовал ниже, но это не показывает сообщение в Highchart.

https://codesandbox.io/s/angular-forked-cce3s

Как бы то ни было, это можно показать, если мы установим lang: { noData: "" } значение lang: { noData: "No Data available" } в параметрах диаграммы.

Но я не хочу этого делать, так как изначально при загрузке страницы будет отображаться сообщение «Нет доступных данных», даже если у нас есть данные.

Есть ли у нас какое-нибудь лучшее решение для этого?

.HTML-содержимое

   <highcharts-chart
  id="container"
  [Highcharts]="Highcharts"
  [constructorType]="chartConstructor"
  [options]="chartOptions"
  [callbackFunction]="chartCallback"
  [(update)]="updateFlag"
  [oneToOne]="true"
  style="width: 100%; height: 400px; display: block;">
  </highcharts-chart>
 

.TS

 import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
const noData = require("highcharts/modules/no-data-to-display");
noData(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFlag = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    title: { text: "" },
    series: [
      {
        data: []
      }
    ],
    lang: { noData: "" },
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };
  data: any;

  constructor() {
    const self = this;
    this.chartCallback = (chart) => {
      // saving chart reference
      self.chart = chart;
    };
  }

  ngOnInit() {
    console.log(Math.random());
    if (Math.random() > 0.6) {
      this.assigndata();
    } else {
      this.assignzero();
    }

    this.updateChart();
  }
  assigndata() {
    this.data = [{ data: [5, 6, 15] }, { data: [7, 4, 14] }];
  }

  assignzero() {
    this.data = [];
  }

  updateChart() {
    const self = this,
      chart = this.chart;
    console.log(this.data);
    setTimeout(() => {
      if (this.data.length === 0) {
        self.chartOptions.series = this.data;
        self.chartOptions.lang.noData = "No Data Available...";
      } else {
        self.chartOptions.series = this.data;
        self.chartOptions.title = {
          text: "Updated title!"
        };
      }

      self.updateFlag = true;
    }, 1000);
  }
}
 

Если у вас пустой набор данных, вы можете задать текст NoData следующим образом

    self.chart.hideNoData();
   self.chart.showNoData("No Data Available...");