[英]React Google Charts - Stacked Column Chart - Show Annotation on Bars
I am trying to get the annotation to show on the bars in a stacked column chart.我正在尝试让注释显示在堆积柱形图中的条形图上。 I couldn't find an example of it anywhere.
我在任何地方都找不到它的例子。 I read Google Chart docs - and it confused me on how to get annotations with the way the React example was.
我阅读了 Google Chart 文档 - 它让我对如何使用 React 示例的方式获取注释感到困惑。 I am thinking it has something to do with column roles.
我认为这与专栏角色有关。
React example: https://www.react-google-charts.com/examples/column-chart反应示例: https://www.react-google-charts.com/examples/column-chart
Google Charts Docs on bar charts: https://developers.google.com/chart/interactive/docs/gallery/barchart条形图上的 Google Charts Docs: https://developers.google.com/chart/interactive/docs/gallery/barchart
Here is what I have: https://codesandbox.io/s/young-shadow-mdsoiv?file=/App.tsx这是我所拥有的: https://codesandbox.io/s/young-shadow-mdsoiv?file=/App.tsx
Here is my code from the above link for context:这是我从上面的上下文链接中获取的代码:
import React from "react";
import { Chart } from "react-google-charts";
export const data = [
["", "Density", "Copper", "Silver", "Gold"],
["", 8, 10, 19, 21],
];
const barChartOptions = {
title: 'Medals',
isStacked: 'percent',
chartArea: { left: 25, top: 65, bottom: 30, right: 220 },
hAxis: {
textPosition: 'none', gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none', gridlines: {
color: 'transparent'
}
},
};
export function App() {
return (
<Chart chartType="ColumnChart" width="100%" height="400px" data={data} options={barChartOptions}/>
);
}
Example of labels in a non-stacked bar chart (note the numbers on the bars):非堆叠条形图中的标签示例(注意条形上的数字):
Figured it out by manipulating the data to be like this:通过将数据操作成这样来弄清楚:
export const data = [
[
"",
{ role: "annotation" },
"Social",
{ role: "annotation" },
"Music",
{ role: "annotation" },
"File Sharing",
{ role: "annotation" },
"Storage",
{ role: "annotation" },
"Weather",
{ role: "annotation" }
],
["", "", 98, 98, 53, 53, 22, 22, 16, 16, 26, 26]
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.