我们在一个项目中使用了prime react,并且需要在其中一个页面中显示条形图(直方图)。
我已经作出了改变,它显示的图表,但上面的一些条形图,我们需要显示一个图标,我无法弄清楚如何显示图标和文字的顶部条形图。我在chart.js中看到有一个名为chartjs-plugin-annotation([url] https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/ [/url])的插件,我无法在当前设置中使用它。
我想实现的是类似https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/label/basic.html的东西
const options = {
maintainAspectRatio: false,
aspectRatio: 0.8,
plugins: {
legend: {
labels: {
fontColor: textColor
},
display: false
},
annotation: {
annotations: {
// define annotations here
}
}
},
scales: {
x: {
stacked: true,
ticks: {
color: textColorSecondary,
font: {
weight: 500
}
},
grid: {
display: false,
drawBorder: false
}
},
y: {
stacked: true,
ticks: {
color: textColorSecondary
},
grid: {
display: false,
drawBorder: false
}
}
}
};
const pureCostDatasets = [
{
type: 'bar',
label: 'Storage Hardware',
backgroundColor: PURE_DATA_COLORS.ORANGE,
data: [50, 25, 12, 48, 90, 76, 42],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
},
{
type: 'bar',
label: 'Support and Services',
backgroundColor: PURE_DATA_COLORS.LIGHT_ORANGE,
data: [21, 84, 24, 75, 37, 65, 34],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
},
{
type: 'bar',
label: 'Credit',
backgroundColor: PURE_DATA_COLORS.GRAY,
data: [-25, 0, 0, 0, 0, 0, 0],
stack: 'Stack 0',
barPercentage: barWidth,
categoryPercentage: categoryWidth
}
];
<Chart type="bar" data={pureCostDatasets} options={chartOptions} />
谁能帮帮我:(
1条答案
按热度按时间7tofc5zh1#
我有一个工作示例:https://stackblitz.com/edit/react-s2tmyz-n1nmzj
你错过了正确注册插件。