Highcharts 不打印来自 API 调用 Angular 的点

Question

这是传递到 highcharts 的我的系列对象的样子。

[0 … 99]
    0:
        data:
            z: 52.4421997
            x: 1301702400000
            y: 54.9129982
            __proto__: Object
        name: "Dummy"
        __proto__: Object

我没有得到任何 x 轴值或 y 轴值，也没有打印数据点。

我正在使用下面的散点对象，其系列参数是以上述格式传递的数据

  scatter(series) : void{
    console.log(series);
    
    const chart = new Chart({
      chart: {
        type: 'scatter',
        reflow: true,
        zoomType: 'xy',
        width: 1328.91
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        type: "datetime",
        title: {
          text: ''
        },
        startOnTick: true,
        endOnTick: true,
        showLastLabel: true
      },
      tooltip: {
        formatter(): string {
          // tslint:disable-next-line: no-string-literal
          return '<b>' + this.series.name + '</b><br/>' + '<b>x </b>' + this.x + '<br/><b>y </b>' + this.y;
        }
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 50,
        floating: false,
        backgroundColor: '#FFFFFF',
        borderWidth: 0
      },
      plotOptions: {
        scatter: {
          marker: {
            radius: 5,
            states: {
              hover: {
                enabled: true,
                lineColor: '#005580'
              }
            }
          }
        }
      },
      // tslint:disable-next-line: object-literal-shorthand
      series: series,
      responsive: {
        rules: [{
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              enabled: false
            }
          }
        }]
      }
    });
    this.chart = chart;
  }

我需要有关我的代码在哪里失败的帮助我已经通过 push

分配了系列数据

this.scatterData.push({
              name: element.name,
              data: {
                x: element.xvalue,
                y: element.param,
                z: elememt.pointer
              }
            });

Answer 1

您需要确保系列数组的格式正确。示例：

var series = [
 {
  data: [
  {
    x: 1,
    y: 2,
    z: 5
  },
  {
    x: 2,
    y: 4,
    z: 1
  },
  {
    x: 3,
    y: 1,
    z: 10
  }]
}];

如果您从 Angular 中收到任何错误，也可以“按任何”添加到系列变量代码或创建一个界面来扩展系列选项。

演示：https://stackblitz.com/edit/highcharts-angular-basic-line-88sbpi

Highcharts 不打印来自 API 调用 Angular 的点

Highcharts not printing points from API call in Angular

angular

typescript

highcharts

ng-zorro-antd

angular-highcharts