我正在尝试将标签添加到以下ngchart水平条形图上的粉红色散点(而不是绿色条形)
但是,如果我尝试用途:
import ChartDataLabels from "chartjs-plugin-datalabels";
我收到以下错误:
Error: node_modules/chartjs-plugin-datalabels/types/context.d.ts:1:16 - error TS2724: Module '"../../@types/chart.js"' has no exported member 'ChartDataset'. Did you mean 'ChartDataSets'?
1 import {Chart, ChartDataset} from 'chart.js';
~~~~~~~~~~~~
node_modules/chartjs-plugin-datalabels/types/index.d.ts:1:20 - error TS2305: Module '"../../@types/chart.js"' has no exported member 'Plugin'.
1 import {ChartType, Plugin} from 'chart.js';
~~~~~~
有没有人知道一个替代库,我可以用来添加标签到我的粉红色散点,或一种方法来修复这些错误?
提前感谢!
最新消息:
感谢@LeeLenalee,我现在已经安装了这个库的v1版本,但是它没有在点旁边显示任何标签。有人能告诉我为什么吗?下面是我的图表代码:
public disproportionChartData = [
{
label: "Disproportionality",
data: [
{ y: 80, x: 80 },
{ x: 40, y: 40 },
{ y: 0, x: 0 },
{ y: -40, x: -40 },
{ y: -80, x: -80 },
],
borderColor: "pink",
backgroundColor: "pink",
pointRadius: 10,
type: "scatter",
xAxisID: "x2",
yAxisID: "y2",
datalabels: {
display: true,
align: "right",
color: "black",
formatter: function (value, context) {
return context.chart.data.labels[context.dataIndex];
},
},
},
{
type: "horizontalBar",
label: "Population 1 %",
data: [-10, -40, -80, -70, -20],
},
{
type: "horizontalBar",
label: "Population 2 %",
data: [10, 20, 30, 50, 90],
},
];
public disproportionChartLabels = [
"Type 1",
"Type 2",
"Type 3",
"Type 4",
"Type 5",
];
public disproportionChartPlugins = [ChartDataLabels];
public disproportionChartOptions = {
responsive: true,
legend: {
position: "top",
},
title: {
display: false,
},
tooltips: {
callbacks: {
title(items) {
const ds2 = items.filter((element) => element.datasetIndex === 1);
return ds2[0].label;
},
},
},
plugins: {
datalabels: {
display: false,
},
},
scales: {
xAxes: [
{
id: "x2",
type: "linear",
position: "top",
ticks: {
callback(value) {
return Math.abs(value);
},
min: -100,
max: 100,
},
},
],
yAxes: [
{
stacked: true,
position: "left",
ticks: {
callback: function (value, index, values) {
return value < 0 ? -value : value;
},
},
},
{
id: "y2",
stacked: true,
position: "right",
ticks: {
callback(value) {
return value;
},
min: -100,
max: 100,
},
},
],
},
};
2条答案
按热度按时间gdrx4gfi1#
您正在将datalabels插件的V2与chart.js的V2一起使用,这不起作用,因为它适用于chart.js v3,您需要使用datalabels插件的V1才能与您的chart.js版本一起使用
ha5z0ras2#
如问题Adding Scatter Dots to Horizontal Stacked Bar Chart.js中所述,您必须使用Datalabels版本1。提供的代码片段和codepen都使用Datalabels版本1。我认为您没有注册插件(请参阅另一个问题中的代码片段)。