在相应条形的正上方显示值

Question

我正在使用react-chartjs-2作为我正在处理的条形图。我已经绘制了数据，为了在相应柱上方显示值，我使用了chartjs-plugin-datalabels但它没有显示柱上方的值。

我已经做了以下工作

import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";
import 'chartjs-plugin-datalabels'
import "./styles.css";
const dataFromApi = [
"19,250",
"26,454",
"36,118",
"49,325",
"64,190",
"109,807"
];
const data = {
labels: ["2019", "2020", "2021", "2022", "2023", "2024"],
datasets: [
{
backgroundColor: "rgb(47,85,151)",
hoverBackgroundColor: "rgb(47,85,151)",
data: dataFromApi.map(value => parseInt(value, 10))
}
]
};
function App() {
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<Bar
data={data}
width={100}
height={50}
options={{
plugins: {
datalabels: {
display: true,
color: "black",
align: "top",
offset: 10,
labels: {
title: {
font: {
weight: "bold"
}
}
},
formatter(value, context) {
return `$${
context.chart.data.datasets[0].data[context.dataIndex]
}k`;
}
}
},
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
display: false
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
barPercentage: 0.3,
ticks: {
beginAtZero: true
}
}
],
yAxes: [
{
display: false,
gridLines: {
display: false
},
ticks: {
display: false,
beginAtZero: true
}
}
]
}
}}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是解决方法

https://codesandbox.io/s/ecstatic-fire-sroc0

我希望所有柱线的值位置都像 2019

年柱线一样。

Answer 1

用react-chartjs-2设置标签的位置非常困难。甚至它也没有出现在文档中。

但是我已经应用了一些逻辑来offset获得位置。希望这会带你走上正确的道路。

offset: function(obj) {
// Your logic will come here
return obj.dataset.data[obj.dataIndex] / 2;
},

这是 https://codesandbox.io/s/cool-frog-93btz 的演示。

我建议你使用highcharts

https://www.highcharts.com/demo/column-drilldown

希望这对您有所帮助！