chartjs-plugin-annotations 未以角度 5 显示 [英] chartjs-plugin-annotations not displayed in angular 5

问题描述

在使用 chart.js 和插件 chartjs-plugin-annotation 时，使用 angular 5 时不显示注释，也不会显示错误消息.

While using the chart.js and the plugin chartjs-plugin-annotation, annotations are not showing while using angular 5, no error messages are displayed.

我创建了一个展示问题的精简代码示例

I have created a cut down example of code that exhibits the problem

console.log(Chart.plugins) 显示插件看起来注册为 plugin[3] 但它没有内置的 id，这是一个问题吗?

console.log(Chart.plugins) shows the plugin looks to be registered as plugin[3] however it doesn't have an id as the inbuilt ones do, is this a problem?

chart.component.ts

chart.component.ts

import { Component, Inject } from '@angular/core';
import { Chart } from 'chart.js';
import 'chartjs-plugin-annotation';

@Component({
  selector: 'app-chart-component',
  templateUrl: './chart.component.html'
})
export class ChartComponent {
  public currentCount = 0;

  chart : Chart ; // This will hold our chart info

  simpleChart() {

    console.log(Chart.plugins);

    this.chart = new Chart('canvas', {
      type: 'line',
      data: {
        labels: ['0','1','2', '3','4'],
        datasets: [
          {
            data: [0,1,2,5,4,5],
            borderColor: "#3cba9f",
            fill: false,
          },

        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          xAxes: [{
            display: true
          }],
          yAxes: [{
            display: true,
            id: 'y-axis-0'
          },
          ]
        },
        plugins: {
          annotation: {
            annotations: [{
              type: 'line',
              id: 'hLine',
              mode: 'horizontal',
              scaleID: 'y-axis-0',
              value: 2.5,  // data-value at which the line is drawn
              borderWidth: 2.5,
              borderColor: 'black'
            }]
          }
        }
      }
    });
  }

  ngOnInit() {
    this.simpleChart();
  }
}

如有任何帮助，我们将不胜感激.

Any assistance would be greatly appreciated.

推荐答案

我在尝试让注释工作时玩得很开心 - 如果你还没有解决它，试试这个...

I had some fun trying to get annotations working - in case you haven't already solved it, try this...

将您的导入声明更改为:

Change your imports statement to:

import * as ChartAnnotation from 'chartjs-plugin-annotation';

将 ngOnInit() 更改为:

ngOnInit() {
  let namedChartAnnotation = ChartAnnotation;
  namedChartAnnotation["id"]="annotation";
  Chart.pluginService.register( namedChartAnnotation);
  this.simpleChart();
}

最后，我相信注释对象应该是选项的子对象，而不是插件.我的看起来像这样:

Lastly, I believe the annotation object is supposed to be a child of options, not plugins. Mine looks like this:

"options": {
    "legend": {
        "display": true
    },
    "scales": {
        "xAxes": [{
                "display": true
            }
        ],
        "yAxes": [{
                "display": true,
                "ticks": {
                    "min": 0,
                    "max": 40
                }
            }
        ]
    },
    "tooltips": {
        "enabled": true,
        "backgroundColor": "#eee",
        "titleFontColor": "#000"
    },
    "annotation": {
        "annotations": [{
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 0,
                "yMax": 15,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(200,60,60,0.25)",
                "borderColor": "rgba(200,60,60,0.25)"
            }, {
                "type": "box",
                "xScaleID": "x-axis-0",
                "yScaleID": "y-axis-0",
                "yMin": 30,
                "yMax": 40,
                "xMin": 864,
                "xMax": 1285,
                "borderWidth": 1,
                "backgroundColor": "rgba(60,60,200,0.25)",
                "borderColor": "rgba(60,60,200,0.25)"
            }
        ]
    }
}

制作漂亮的图表 :)

(除了我得到了低音的颜色！哎呀！)

(except I got the colours bass ackwards! Oops!)

这篇关于chartjs-plugin-annotations 未以角度 5 显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！