Question

使用chartjs-plugin-annotation尝试在PrimeNg图表上绘制水平线似乎不起作用。除非必须，否则我不想安装其他图表库。

 <p-chart #decisionPlot type="scatter" [data]="decisionPlotData" [options]="decisionPlotOptions"  [plugins]="decisionPlotPlugins"  [height]="defaultHeight" (onDataSelect)="onPlotClick($event)">
  </p-chart>

在ngOnInit（）中是这样的：

const namedChartAnnotation = ChartAnnotation;
namedChartAnnotation['id'] = 'annotation';
Chart.pluginService.register( namedChartAnnotation);
this.decisionPlotOptions = this.plotService.getAnnotationsOptions();

在plotService中是这样的：

getAnnotationsOptions() {
return {
  legend: {
    display: false
  },
  annotation: {
    annotations: [{
      // drawTime: 'afterDatasetsDraw',
      id: 'hline',
      type: 'line',
      mode: 'horizontal',
      scaleID: 'y-axis-0',
      value: .5,
      borderColor: 'red',
      borderWidth: 10
      }]
    },
plugins: [{
  annotation: {
  annotations: [{
    // drawTime: 'afterDatasetsDraw',
    id: 'hline',
    type: 'line',
    mode: 'horizontal',
    scaleID: 'y-axis-0',
    value: .5,
    borderColor: 'red',
    borderWidth: 10
    }]
  }
}]

}; }

我也尝试过使用组件上的[plugins]属性直接分配插件，但是没有帮助。这是迷失的原因吗？

Answer 1

将scaleID从“ y-axis-1”更改为

scaleID: 'y-axis-1'

解决了我的问题。花费了这么长时间来压扁lil ol typeo bug。

chartNG图表中未显示chartjs-plugin-annotations

1 个答案: