当我尝试将日期放在 x 轴上时，Angular Highcharts 区域样条图不起作用

Question

当我尝试将日期放在 x 轴上时，Angular Highcharts 区域样条图不起作用。我哪里做错了？

我希望我的图表具有相同类型的 x 轴数据（即日期格式）。在图表上的悬停点上，它应该为我提供带有数据的实际日期和时间。这是折线图，但我的是面积样条图。

API 数据示例

{
    "body": {
        "httpstatuscode": 200,
        "AppData": [
            {
                "disk": [
                    ["Date.UTC(2024,05,09,04,59)",0.09272282759826356],
                    ["Date.UTC(2024,05,07,15,14)",0.09238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.09246349058006409]
                ],
                "load": [
                    ["Date.UTC(2024,05,09,04,59)",0.2327228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.45246349058006409]
                ],
                "cpu": [
                    ["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
                ],
                "ram": [
                    ["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.65246349058006409]
                ]
            },
         {
                "disk": [
                    ["Date.UTC(2024,05,09,04,59)",0.23272282759826356],
                    ["Date.UTC(2024,05,07,15,14)",0.65238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.76246349058006409]
                ],
                "load": [
                    ["Date.UTC(2024,05,09,04,59)",0.3427228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.56238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.67246349058006409]
                ],
                "cpu": [
                    ["Date.UTC(2024,05,09,04,59)",0.1227228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.54238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.89246349058006409]
                ],
                "ram": [
                    ["Date.UTC(2024,05,09,04,59)",0.7927228273426356],
                    ["Date.UTC(2024,05,07,15,14)",0.76238017230533957],
                    ["Date.UTC(2024,05,07,23,22)",0.62246349058006409]
                ]
            }            
        ],
        "opStatusCode": 2000,
        "type": "SUCCESS",
        "message": "DATA RECEIVED SUCCESSFULLY"
    }
}

Comonent.html

<div class="graphBodyDiv">
  <highcharts-chart
    [Highcharts]="highcharts"
    [options]="chartOptions">
  </highcharts-chart>
</div>

组件.ts

      cpuData=[];
      ramData=[];
      loadData=[];
      diskData=[];
    
  constructor(private httpclient: HttpClient,private httpService: HttpService) {}
      fetchData(){
        this.httpService.getData(request).subscribe((response: any) => {
          try {
            const jsonBody = response['body'];
            const appData = jsonBody['AppData'];
            this.cpuData=appData['cpu']
            this.loadData=appData['load']
            this.ramData=appData['ram']
            this.diskData=appData['disk']
    
            this.createAreaSplineChart();
          } catch (e: any) {
            console.log('Error in parsing json ' + e.message);
          }
          return response;
        });
    
      }
    
      highcharts:any;
      chartOptions:any;
    
      createAreaSplineChart(){
      console.log("******* chart printed.")
      this.highcharts=Highcharts
      this.chartOptions = {   
          chart: {
             type: 'areaspline'
          },
          title: {
             text: "Area Spline graph"
          },
          legend : {
             backgroundColor: '#FFFFFF'
          },
          xAxis:{
            title: {
              text: 'Hours',
              // enabled: true
           },
           allowDecimals: false,
            accessibility: {
                rangeDescription: 'Range: 1 to 24.'
            },
            type: 'datetime',
            dateTimeLabelFormats : {
              hour: '%I %p',
              minute: '%I:%M %p'
          },
            //  categories: ['1','2','3','4','5','6','7','8','9'] ,
            //  min:0,
             gridLineWidth: 1, // this is for vertical grid line
          lineWidth: 0,
          gridLineDashStyle: 'Solid',
          labels: {
            // autoRotationLimit: 30, // word-wrap
            enabled: true, // to enable x-axis labels
          },
          },
          yAxis : {
             title: {
                text: ''
             },
            //  min:0
          },
          plotOptions : {
            series: {
              marker: {
                  enabled: false, // enable point highlight on line chart
                  states: {
                    hover: {
                        enabled: true // enable point highlight on hover
                    }
                }
              }
          },
            //  area: {
            //     fillOpacity: 0.1 
            //  },
            areaspline: {
              fillOpacity: 0.1
          }
          },
          tooltip : {
            shared: true
            // valueSuffix: ' units'
         },
          credits:{
             enabled: false
          },
          series: [
             {
                name: 'CPU',
                data: this.cpuData,
                color:'#0021FF',
                lineWidth: 1.3
             }, 
             {
                name: 'RAM',
                data: this.ramData,
                color:'#FF5238',
                lineWidth: 1.3
             },
             {
              name: 'Load',
              data: this.loadData,
              color:'#981FFF',
              lineWidth: 1.3
           }, 
           {
              name: 'Disk',
              data: this.diskData,
              color:'#00D6F2',
              lineWidth: 1.3
           }
          ]
       };
      }

Answer 1

您的代码看起来不错，我唯一要更改的是将数据格式更改为：

[Date.UTC(2024, 5, 7, 15, 14), 0.65238017230533957],
[Date.UTC(2024, 5, 7, 23, 22), 0.76246349058006409],
[Date.UTC(2024, 5, 9, 4, 59), 0.23272282759826356],

这是一个工作演示： https://stackblitz.com/edit/highcharts-angular-basic-line-2taahu?file=src%2Fapp%2Fapp.component.ts

如果出现问题或您有任何其他问题，请告诉我！