我正在尝试使用GoogleCharts库创建经典的股价图。我想要一个在底部带有直方图的烛台图，以显示交易量。我弄清楚了烛台部分，但似乎无法弄清楚如何将其转换为组合图。
我读过this：但这对我来说还不清楚。 Here是我已经拥有的代码笔：
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn("number", "Date");
data.addColumn("number", "Low");
data.addColumn("number", "Open");
data.addColumn("number", "Close");
data.addColumn("number", "High");
data.addColumn({ type: "string", role: "tooltip" });
var stockArray = [];
//stockArray.push(["mon", 1, 11, 5, 20, 'Open: 3 \r\n High: 30 \r\n Low: 1 \r\n Close: 12']);
stockArray.push([
1,
277.399994,
278.109985,
279.140015,
279.359985,
"Date: 2019-02-22 \r\n Open: 278.109985 \r\n High: 279.359985 \r\n Low: 277.399994 \r\n Close: 279.140015"
]);
stockArray.push([
2,
279.429993,
280.730011,
279.519989,
281.309998,
"Date: 2019-02-25 \r\n Open: 280.730011 \r\n High: 281.309998 \r\n Low: 279.429993 \r\n Close: 279.519989"
]);
stockArray.push([
3,
278.899994,
279.130005,
279.320007,
280.299988,
"Date: 2019-02-26 \r\n Open: 279.130005 \r\n High: 280.299988 \r\n Low: 278.899994 \r\n Close: 279.320007"
]);
stockArray.push([
4,
277.480011,
278.519989,
279.200012,
279.589996,
"Date: 2019-02-27 \r\n Open: 278.519989 \r\n High: 279.589996 \r\n Low: 277.480011 \r\n Close: 279.200012"
]);
stockArray.push([
5,
278.320007,
278.959991,
278.679993,
279.450012,
"Date: 2019-02-28 \r\n Open: 278.959991 \r\n High: 279.450012 \r\n Low: 278.320007 \r\n Close: 278.679993"
]);
stockArray.push([
6,
278.820007,
280.440002,
280.420013,
280.880005,
"Date: 2019-03-01 \r\n Open: 280.440002 \r\n High: 280.880005 \r\n Low: 278.820007 \r\n Close: 280.420013"
]);
stockArray.push([
7,
276.839996,
281.600006,
279.399994,
281.869995,
"Date: 2019-03-04 \r\n Open: 281.600006 \r\n High: 281.869995 \r\n Low: 276.839996 \r\n Close: 279.399994"
]);
stockArray.push([
8,
278.410004,
279.540009,
279.019989,
279.76001,
"Date: 2019-03-05 \r\n Open: 279.540009 \r\n High: 279.760010 \r\n Low: 278.410004 \r\n Close: 279.019989"
]);
stockArray.push([
9,
276.970001,
279.149994,
277.329987,
279.160004,
"Date: 2019-03-06 \r\n Open: 279.149994 \r\n High: 279.160004 \r\n Low: 276.970001 \r\n Close: 277.329987"
]);
stockArray.push([
10,
274.070007,
276.829987,
275.01001,
276.98999,
"Date: 2019-03-07 \r\n Open: 276.829987 \r\n High: 276.989990 \r\n Low: 274.070007 \r\n Close: 275.010010"
]);
stockArray.push([
11,
272.420013,
272.940002,
274.459991,
274.649994,
"Date: 2019-03-08 \r\n Open: 272.940002 \r\n High: 274.649994 \r\n Low: 272.420013 \r\n Close: 274.459991"
]);
stockArray.push([
12,
275.230011,
275.26001,
278.440002,
278.619995,
"Date: 2019-03-11 \r\n Open: 275.260010 \r\n High: 278.619995 \r\n Low: 275.230011 \r\n Close: 278.440002"
]);
stockArray.push([
13,
278.850006,
279.059998,
279.48999,
280.070007,
"Date: 2019-03-12 \r\n Open: 279.059998 \r\n High: 280.070007 \r\n Low: 278.850006 \r\n Close: 279.489990"
]);
stockArray.push([
14,
280.299988,
280.480011,
281.339996,
282.380005,
"Date: 2019-03-13 \r\n Open: 280.480011 \r\n High: 282.380005 \r\n Low: 280.299988 \r\n Close: 281.339996"
]);
stockArray.push([
15,
280.670013,
281.369995,
281.160004,
281.839996,
"Date: 2019-03-14 \r\n Open: 281.369995 \r\n High: 281.839996 \r\n Low: 280.670013 \r\n Close: 281.160004"
]);
stockArray.push([
16,
280.329987,
280.540009,
281.309998,
282.209991,
"Date: 2019-03-15 \r\n Open: 280.540009 \r\n High: 282.209991 \r\n Low: 280.329987 \r\n Close: 281.309998"
]);
stockArray.push([
17,
281.299988,
281.549988,
282.329987,
282.660004,
"Date: 2019-03-18 \r\n Open: 281.549988 \r\n High: 282.660004 \r\n Low: 281.299988 \r\n Close: 282.329987"
]);
stockArray.push([
18,
281.410004,
283.51001,
282.399994,
284.359985,
"Date: 2019-03-19 \r\n Open: 283.510010 \r\n High: 284.359985 \r\n Low: 281.410004 \r\n Close: 282.399994"
]);
stockArray.push([
19,
280.320007,
282.160004,
281.549988,
283.5,
"Date: 2019-03-20 \r\n Open: 282.160004 \r\n High: 283.500000 \r\n Low: 280.320007 \r\n Close: 281.549988"
]);
stockArray.push([
20,
280.589996,
280.640015,
284.730011,
285.179993,
"Date: 2019-03-21 \r\n Open: 280.640015 \r\n High: 285.179993 \r\n Low: 280.589996 \r\n Close: 284.730011"
]);
stockArray.push([
21,
279.179993,
283.220001,
279.25,
283.799988,
"Date: 2019-03-22 \r\n Open: 283.220001 \r\n High: 283.799988 \r\n Low: 279.179993 \r\n Close: 279.250000"
]);
stockArray.push([
22,
277.640015,
278.869995,
279.040009,
280.190002,
"Date: 2019-03-25 \r\n Open: 278.869995 \r\n High: 280.190002 \r\n Low: 277.640015 \r\n Close: 279.040009"
]);
stockArray.push([
23,
279.559998,
280.98999,
281.119995,
282.179993,
"Date: 2019-03-26 \r\n Open: 280.989990 \r\n High: 282.179993 \r\n Low: 279.559998 \r\n Close: 281.119995"
]);
stockArray.push([
24,
277.929993,
281.109985,
279.649994,
281.76001,
"Date: 2019-03-27 \r\n Open: 281.109985 \r\n High: 281.760010 \r\n Low: 277.929993 \r\n Close: 279.649994"
]);
stockArray.push([
25,
279.070007,
280.350006,
280.709991,
281.209991,
"Date: 2019-03-28 \r\n Open: 280.350006 \r\n High: 281.209991 \r\n Low: 279.070007 \r\n Close: 280.709991"
]);
stockArray.push([
26,
281.140015,
282.390015,
282.480011,
282.839996,
"Date: 2019-03-29 \r\n Open: 282.390015 \r\n High: 282.839996 \r\n Low: 281.140015 \r\n Close: 282.480011"
]);
stockArray.push([
27,
284.399994,
284.700012,
285.829987,
286.160004,
"Date: 2019-04-01 \r\n Open: 284.700012 \r\n High: 286.160004 \r\n Low: 284.399994 \r\n Close: 285.829987"
]);
stockArray.push([
28,
285.089996,
286.040009,
285.970001,
286.230011,
"Date: 2019-04-02 \r\n Open: 286.040009 \r\n High: 286.230011 \r\n Low: 285.089996 \r\n Close: 285.970001"
]);
stockArray.push([
29,
285.75,
287.320007,
286.420013,
287.76001,
"Date: 2019-04-03 \r\n Open: 287.320007 \r\n High: 287.760010 \r\n Low: 285.750000 \r\n Close: 286.420013"
]);
stockArray.push([
30,
286.01001,
286.779999,
287.179993,
287.459991,
"Date: 2019-04-04 \r\n Open: 286.779999 \r\n High: 287.459991 \r\n Low: 286.010010 \r\n Close: 287.179993"
]);
stockArray.push([
31,
287.600006,
287.920013,
288.570007,
288.630005,
"Date: 2019-04-05 \r\n Open: 287.920013 \r\n High: 288.630005 \r\n Low: 287.600006 \r\n Close: 288.570007"
]);
stockArray.push([
32,
287.369995,
288.100006,
288.790009,
288.910004,
"Date: 2019-04-08 \r\n Open: 288.100006 \r\n High: 288.910004 \r\n Low: 287.369995 \r\n Close: 288.790009"
]);
stockArray.push([
33,
286.700012,
287.720001,
287.309998,
288.079987,
"Date: 2019-04-09 \r\n Open: 287.720001 \r\n High: 288.079987 \r\n Low: 286.700012 \r\n Close: 287.309998"
]);
stockArray.push([
34,
287.309998,
287.769989,
288.290009,
288.390015,
"Date: 2019-04-10 \r\n Open: 287.769989 \r\n High: 288.390015 \r\n Low: 287.309998 \r\n Close: 288.290009"
]);
stockArray.push([
35,
287.579987,
288.829987,
288.209991,
288.839996,
"Date: 2019-04-11 \r\n Open: 288.829987 \r\n High: 288.839996 \r\n Low: 287.579987 \r\n Close: 288.209991"
]);
stockArray.push([
36,
288.26001,
290.0,
290.160004,
290.470001,
"Date: 2019-04-12 \r\n Open: 290.000000 \r\n High: 290.470001 \r\n Low: 288.260010 \r\n Close: 290.160004"
]);
stockArray.push([
37,
289.079987,
290.23999,
289.970001,
290.350006,
"Date: 2019-04-15 \r\n Open: 290.239990 \r\n High: 290.350006 \r\n Low: 289.079987 \r\n Close: 289.970001"
]);
stockArray.push([
38,
289.5,
290.950012,
290.160004,
291.01001,
"Date: 2019-04-16 \r\n Open: 290.950012 \r\n High: 291.010010 \r\n Low: 289.500000 \r\n Close: 290.160004"
]);
stockArray.push([
39,
288.98999,
291.399994,
289.450012,
291.429993,
"Date: 2019-04-17 \r\n Open: 291.399994 \r\n High: 291.429993 \r\n Low: 288.989990 \r\n Close: 289.450012"
]);
stockArray.push([
40,
288.660004,
290.100006,
290.019989,
290.320007,
"Date: 2019-04-18 \r\n Open: 290.100006 \r\n High: 290.320007 \r\n Low: 288.660004 \r\n Close: 290.019989"
]);
stockArray.push([
41,
289.070007,
289.170013,
290.269989,
290.440002,
"Date: 2019-04-22 \r\n Open: 289.170013 \r\n High: 290.440002 \r\n Low: 289.070007 \r\n Close: 290.269989"
]);
stockArray.push([
42,
290.420013,
290.679993,
292.880005,
293.140015,
"Date: 2019-04-23 \r\n Open: 290.679993 \r\n High: 293.140015 \r\n Low: 290.420013 \r\n Close: 292.880005"
]);
stockArray.push([
43,
292.070007,
292.790009,
292.230011,
293.160004,
"Date: 2019-04-24 \r\n Open: 292.790009 \r\n High: 293.160004 \r\n Low: 292.070007 \r\n Close: 292.230011"
]);
stockArray.push([
44,
290.730011,
292.119995,
292.049988,
292.779999,
"Date: 2019-04-25 \r\n Open: 292.119995 \r\n High: 292.779999 \r\n Low: 290.730011 \r\n Close: 292.049988"
]);
stockArray.push([
45,
291.23999,
292.100006,
293.410004,
293.48999,
"Date: 2019-04-26 \r\n Open: 292.100006 \r\n High: 293.489990 \r\n Low: 291.239990 \r\n Close: 293.410004"
]);
stockArray.push([
46,
293.410004,
293.51001,
293.869995,
294.450012,
"Date: 2019-04-29 \r\n Open: 293.510010 \r\n High: 294.450012 \r\n Low: 293.410004 \r\n Close: 293.869995"
]);
stockArray.push([
47,
291.920013,
293.48999,
294.019989,
294.339996,
"Date: 2019-04-30 \r\n Open: 293.489990 \r\n High: 294.339996 \r\n Low: 291.920013 \r\n Close: 294.019989"
]);
stockArray.push([
48,
291.799988,
294.720001,
291.809998,
294.950012,
"Date: 2019-05-01 \r\n Open: 294.720001 \r\n High: 294.950012 \r\n Low: 291.799988 \r\n Close: 291.809998"
]);
stockArray.push([
49,
289.519989,
291.679993,
291.179993,
292.700012,
"Date: 2019-05-02 \r\n Open: 291.679993 \r\n High: 292.700012 \r\n Low: 289.519989 \r\n Close: 291.179993"
]);
stockArray.push([
50,
291.299988,
292.820007,
294.029999,
294.339996,
"Date: 2019-05-03 \r\n Open: 292.820007 \r\n High: 294.339996 \r\n Low: 291.299988 \r\n Close: 294.029999"
]);
stockArray.push([
51,
288.899994,
289.25,
292.820007,
293.309998,
"Date: 2019-05-06 \r\n Open: 289.250000 \r\n High: 293.309998 \r\n Low: 288.899994 \r\n Close: 292.820007"
]);
stockArray.push([
52,
285.809998,
290.149994,
287.929993,
290.809998,
"Date: 2019-05-07 \r\n Open: 290.149994 \r\n High: 290.809998 \r\n Low: 285.809998 \r\n Close: 287.929993"
]);
stockArray.push([
53,
286.869995,
287.529999,
287.529999,
289.429993,
"Date: 2019-05-08 \r\n Open: 287.529999 \r\n High: 289.429993 \r\n Low: 286.869995 \r\n Close: 287.529999"
]);
stockArray.push([
54,
283.299988,
285.230011,
286.660004,
287.329987,
"Date: 2019-05-09 \r\n Open: 285.230011 \r\n High: 287.329987 \r\n Low: 283.299988 \r\n Close: 286.660004"
]);
stockArray.push([
55,
282.299988,
285.619995,
288.100006,
288.940002,
"Date: 2019-05-10 \r\n Open: 285.619995 \r\n High: 288.940002 \r\n Low: 282.299988 \r\n Close: 288.100006"
]);
stockArray.push([
56,
279.929993,
282.420013,
280.859985,
283.48999,
"Date: 2019-05-13 \r\n Open: 282.420013 \r\n High: 283.489990 \r\n Low: 279.929993 \r\n Close: 280.859985"
]);
data.addRows(stockArray);
var options = {
legend: "none",
backgroundColor: "#191c20",
chartArea: { left: 20, top: 30, width: "93%", height: "88%" },
hAxis: {
gridlines: {
count: 0
},
textPosition: "none"
},
vAxis: {
gridlines: {
count: 3
}
},
seriesType: "candlesticks",
series: {
0: { targetAxisIndex: 1 },
1: { targetAxisIndex: 1 }
},
candlestick: {
fallingColor: { strokeWidth: 0, fill: "#a52714" }, // red
risingColor: { strokeWidth: 0, fill: "#0f9d58" } // green
},
explorer: {}
};
var chart = new google.visualization.CandlestickChart(
document.getElementById("stock_chart")
);
chart.draw(data, options);
}
drawChart();
任何朝着正确方向前进的人，我将不胜感激。