响应Google图表-堆叠的列图-显示条形图上的注释
响应Google图表-堆叠的列图-显示条形图上的注释
提问于 2022-10-26 22:29:01
我试图让注释显示在堆叠的列图中的条形图上。我在任何地方都找不到它的例子。我读过Google图表文档--它让我对如何获得注释和使用React示例的方式感到困惑。我认为这与专栏角色有关。
反应例子：https://www.react-google-charts.com/examples/column-chart
条形图上的Google文档：https://developers.google.com/chart/interactive/docs/gallery/barchart
以下是我所拥有的：https://codesandbox.io/s/young-shadow-mdsoiv?file=/App.tsx
下面是我从上面链接中获得的上下文代码：
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}/>
);
}无堆叠条形图中标签的例子(注意条形图上的数字)：
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-18 22:41:16
通过将数据处理成这样，我们就知道了：
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]
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74214886
复制相关文章
相似问题
腾讯云开发者
