ChartJS插件数据标签未在Ionic 3上显示标签 [英] ChartJS plugin datalabels not showing labels on Ionic 3
问题描述
我正在使用Ionic 3,正在显示条形图,并且需要在条形图旁边显示数据标签,例如此问题
I'm working with Ionic 3, I'm displaying a bar chart and I need to show data label next to the bar on chart, like this question how to display data values on Chart.js
我遵循了到目前为止找到的关于chartjs-plugin-datalabels的说明,但是没有用,它没有在我的图表上显示任何数据标签.
I followed the instructions I have found so far for chartjs-plugin-datalabels but is not working, it's not showing any data label on my chart.
我通过npm安装了chartjs和chartjs-plugin-datalabels,它们在我的package.json中看起来像这样
I installed chartjs and chartjs-plugin-datalabels via npm and they look like this in my package.json
"chart.js": "^2.7.3",
"chartjs-plugin-datalabels": "^0.5.0",
我完成了导入操作,就像文档对 https所说的那样://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#integration ,但
I did the imports just like the docs says to https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#integration , but the import line for
import { ChartDataLabels } from 'chartjs-plugin-datalabels';
在VSCode编辑器中显示为已声明'ChartDataLabels',但从不读取其值"
is showing in VSCode editor as "'ChartDataLabels' is declared but its value is never read"
我还在'options'中添加了一个'plugin'参数,就像文档中说的那样,但仍然没有显示任何数据标签.
I've also added inside 'options' a 'plugin' parameter, just like the docs says so, but stills not showing any datalabels.
这是我的代码的一部分.
Here is an extract of my code.
import { Component, ViewChild, ɵConsole } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, App } from 'ionic-angular';
import { Chart } from 'chart.js';
import { ChartDataLabels } from 'chartjs-plugin-datalabels';
@ViewChild('barCanvas') barCanvas;
ionViewDidLoad() {
this.barChart = new Chart(this.barCanvas.nativeElement, {
type: 'bar',
data: {
labels: [..],
datasets: [
{
label: "Ok",
data: arrayOk,
backgroundColor: '#014582',
borderWidth: 1,
datalabels: {
align: 'end',
anchor: 'start'
}
},
{
label: "Not Okay",
data: arrayNotOk,
backgroundColor: '#777676',
borderWidth: 1,
datalabels: {
align: 'center',
anchor: 'center'
}
}],
},
options: {
plugins: {
datalabels: {
color: 'white',
display: function (context) {
return context.dataset.data[context.dataIndex] > 1;
},
font: {
weight: 'bold'
},
formatter: Math.round,
title: false
}
},
title: {
display: true,
position: "top",
text: "My Bar Chart with Datalabels",
fontSize: 18,
fontColor: "#111"
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
ticks: {
autoSkip: false
}
}]
},
legend: false
}
});
}
推荐答案
我通过添加一个属性并将其传递给类构造函数中的ChartLabel插件属性来解决了我的问题.
I solved my problem by adding an attribute and passing to it ChartLabel plugin property in class constructor.
import { Chart } from 'chart.js';
import { ChartDataLabels } from 'chartjs-plugin-datalabels';
export class Chart {
chartLabels: any;
constructor( ... ){
this.chartLabels = ChartDataLabels;
}
}
这篇关于ChartJS插件数据标签未在Ionic 3上显示标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!