Highcharts 没有从 Angular 中的 API 调用打印点答案

【问题标题】：Highcharts not printing points from API call in AngularHighcharts 没有从 Angular 中的 API 调用打印点
【发布时间】：2021-10-20 00:47:34
【问题描述】：

这就是传递给 highcharts 的系列对象的外观。

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

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

我正在使用下面的 scatter 对象，其中 series 参数是以上述格式传递的数据

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

我需要关于我的代码失败的地方的帮助我已经通过推送分配了系列数据

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

【问题讨论】：

也许你可以发布一些相关的代码？这里没有足够的信息供任何人帮助您。

标签： angular typescript highcharts ng-zorro-antd angular-highcharts

【解决方案1】：

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

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

如果您从 Angular 中得到任何错误，最好将“as any”添加到系列变量代码中，或者创建一个扩展系列选项的接口。

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

【讨论】：