问题描述
我正在尝试使用 react-google-charts 在同一图表上创建带有多行的蜡烛图。但是当我尝试时,这是输出:
但这是我想要的图表:
这是我使用过的代码:
<Chart
width={"500px"}
height={"300px"}
chartType="ComboChart"
loader={<div>Loading Chart</div>}
data={[
["day","a","b","c","d","Medium","medium2"],["2004/05",165,938,522,998,450,614.6],["2005/06",135,1120,599,1268,288,682],["2006/07",157,1167,587,807,397,623],["2007/08",139,1110,615,968,215,609.4],["2008/09",136,691,629,1026,366,569.6],]}
options={{
seriesType: "CandlestickChart",series: {
1: { type: "line" },},}}
/>
这些是我已经用于制作此版本程序的链接:
- Multiple lines over google candlestick chart
- https://react-google-charts.com/combo-chart
- https://developers.google.com/chart/interactive/docs/gallery/combochart
这是项目:
谁能告诉我我的程序做错了什么?
解决方法
好的,我找到了问题的解决方案。这是解决方案:
<Chart
width={"500px"}
height={"300px"}
chartType="CandlestickChart"
loader={<div>Loading Chart</div>}
data={[
["day","a","b","c","d","Medium","medium2"],["2004/05",40,450,614.6],["2005/06",135,1120,599,1268,288,682],["2006/07",157,1167,587,807,397,623],["2007/08",139,1110,615,968,215,609.4],["2008/09",136,691,629,1026,366,569.6]
]}
options={{
series: {
1: { type: "line" },2: { type: "line" }
}
}}
/>
问题是我使用的是 ComboChart 但在这种情况下我真的不明白为什么它不起作用。使用 CandlestickChart 就可以了。
我的代码: