如何呈现 ColumnChart 滑块
How can I render a ColumnChart slider
我来这里是因为我正在为我的 dataviz 应用程序使用一些滑块。
我已经用滑块做了一个图表,它工作正常,但现在我想用 ColumnChart 而不是 LineChart 做同样的事情...:[=16=]
这是工作代码:
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 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", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
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" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
但是当我取消注释时间滑块的代码时,我得到了一个奇怪的结果:
weirdResult
我错过了什么?我怎样才能拥有与 ColumnChart 相同类型的滑块?
感谢您的帮助!
我正在使用 React 和 React google Chart,它是 Google 图表
的包装器
如 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, 11, 6),
},
},
},
},
]}
我来这里是因为我正在为我的 dataviz 应用程序使用一些滑块。
我已经用滑块做了一个图表,它工作正常,但现在我想用 ColumnChart 而不是 LineChart 做同样的事情...:[=16=]
这是工作代码:
width={"100%"}
chartType="LineChart"
loader={<div>Loading Chart</div>}
data={[
["Date", "Value"],
[new Date(2000, 11, 26), 13],
[new Date(2000, 11, 27), 50],
[new Date(2000, 11, 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", "Value"],
[new Date(2000, 11, 11), 32],
[new Date(2000, 11, 12), 5],
[new Date(2000, 11, 13), 46],
[new Date(2000, 11, 14), 31],
[new Date(2000, 11, 15), 17],
[new Date(2000, 11, 16), 17],
[new Date(2000, 11, 17), 6],
[new Date(2000, 11, 18), 43],
[new Date(2000, 11, 19), 11],
[new Date(2000, 11, 20), 44],
[new Date(2000, 11, 21), 44],
[new Date(2000, 11, 22), 37],
[new Date(2000, 11, 23), 43],
[new Date(2000, 11, 24), 26],
[new Date(2000, 11, 25), 13],
[new Date(2000, 11, 26), 50],
[new Date(2000, 11, 27), 32],
[new Date(2000, 11, 28), 25],
]}
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" },
is3D: true,
colors: ['orange'],
}}
rootProps={{ "data-testid": "1" }}
chartPackages={["corechart", "controls"]}
/*
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "ColumnChart",
chartOptions: {
chartArea: { width: "90%", height: "50%" },
hAxis: { baselineColor: "none" },
},
},
},
controlPosition: "bottom",
controlWrapperParams: {
state: {
range: {
start: new Date(2000, 11, 1),
end: new Date(2000, 11, 6),
},
},
},
},
]}
*/
/>
And the result
但是当我取消注释时间滑块的代码时,我得到了一个奇怪的结果:
weirdResult
我错过了什么?我怎样才能拥有与 ColumnChart 相同类型的滑块?
感谢您的帮助!
我正在使用 React 和 React google Chart,它是 Google 图表
的包装器如 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, 11, 6),
},
},
},
},
]}