Angular 11中Highcharts图例分组、及格/不及格数据不显示问题求解

错误原因 #

• 仅配置了1组series，因此图例仅会展示1个条目，且直接将quizName数组赋值给单个series的name属性，无法拆分每个测验作为单独图例。
• 给单个数据点的y属性传入了chartDataPassed、chartDataFailed数组，而Highcharts要求单个点的y值为数值，因此数据无法正常渲染。

修复代码 #

修改getQuizRemarks方法中chartOptions的配置如下：

getQuizRemarks(){
  this.dataService.getRemarks().subscribe(res => {
    console.log(res);
    const chartDataPassed = res['quizRemarks'].map(item => item.Passed)
    const chartDataFailed = res['quizRemarks'].map(item => item.Failed)
    const quizName = res['quizRemarks'].map(item => item.Quiz_Title)
    console.log(chartDataPassed)
    console.log(chartDataFailed)
    console.log(quizName)

    this.chartOptions = {
      chart: {
        type: 'bar'
      },
      title: {
        text: "卡车司机测验结果"
      },
      subtitle: {
        text: ''
      },
      accessibility: {
        announceNewData: {
          enabled: true
        },
        point: {
          valueSuffix: '%'
        }
      },
      // 修改x轴分类为及格、不及格两个维度
      xAxis: {
        categories: ['Passed', 'Failed']
      },
      yAxis: {
        title: {
          text: '分数占比'
        }
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true,
            format: '{point.y:.1f}%'
          },
          showInLegend: true
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b><br/>'
      },
      // 遍历生成每个测验对应的series，实现每个测验作为单独图例
      series: quizName.map((name, index) => ({
        name: name,
        data: [chartDataPassed[index], chartDataFailed[index]]
      }))
    };
    HC_exporting(Highcharts);
  })
}

内容的提问来源于stack exchange，提问作者reginald bollosa