如何解决如何呈现 ColumnChart 滑块
我来这里是因为我正在为我的 dataviz 应用程序使用一些滑块而苦恼。
我已经做了一个带有滑块的图表并且它工作正常,但现在我想用 ColumnChart 而不是 LineChart 做同样的事情......:
这是工作代码:
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date","Value"],[new Date(2000,11,26),13],27),50],28),32],//there is very much lines here but for simplicity i removed them
]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,chartArea: { height: "80%",width: "90%" },hAxis: { slantedText: false },vAxis: { viewWindow: { min: 0,max: 55 } },legend: { position: "none" },colors: ['#f6c7b6']
}}
rootProps={{ "data-testid": "0" }}
chartPackages={["corechart","controls"]}
controls={[
{
controlType: "ChartRangeFilter",options: {
filterColumnIndex: 0,ui: {
chartType: "LineChart",chartOptions: {
chartArea: { width: "90%",height: "50%" },hAxis: { baselineColor: "none" },colors: ['green'],},controlPosition: "bottom",controlWrapperParams: {
state: {
range: {
start: new Date(2000,1,1),end: new Date(2000,4,6),]}
/>
结果如下:Here is the result
现在我想要相同的数据,但使用 ColumnChart, 我这样做了:
<Chart
width={"100%"}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={[
["Date",11),12),5],13),46],14),31],15),17],16),17),6],18),43],19),11],20),44],21),22),37],23),24),26],25),25],]}
options={{
// Use the same chart area width as the control for axis alignment.
interpolateNulls: false,// vAxis: { viewWindow: { min: 0,is3D: true,colors: ['orange'],}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart","controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",options: {
filterColumnIndex: 0,ui: {
chartType: "ColumnChart",chartOptions: {
chartArea: { width: "90%",controlWrapperParams: {
state: {
range: {
start: new Date(2000,]}
*/
/>
我错过了什么?我怎么能有与 ColumnChart 相同类型的滑块?
感谢您的帮助!
我正在使用 React 和 React google Chart,后者是 Google Chart 的包装器
解决方法
如 ChartRangeFilter 的参考中所述,ColumnChart
不是有效的图表类型(请参阅选项 --> ui.chartType
)
尝试改用 ComboChart
,
并将 seriesType
图表选项设置为 bars
看下面的片段...
controls={[
{
controlType: "ChartRangeFilter",options: {
filterColumnIndex: 0,ui: {
chartType: "ComboChart",// <-- use ComboChart
chartOptions: {
chartArea: { width: "90%",height: "50%" },hAxis: { baselineColor: "none" },seriesType: "bars",// <-- set series type
},},controlPosition: "bottom",controlWrapperParams: {
state: {
range: {
start: new Date(2000,11,1),end: new Date(2000,6),]}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。