结合 Google 图表的烛台图和折线图时“最后一个域没有足够的数据列”

Question

我正在尝试渲染 CandleStick 图表和折线图。

这是我失败示例的 JSFiddle：https://jsfiddle.net/7wyp6yy3/1/

这是我的 CandleStick 图表的 JSFiddle：https://jsfiddle.net/7jadqnsb/

我所做的，在我的 Candlestick 代码之上，我添加了默认的SeriesType

candlesticks

，并将第五列指定为折线图

        seriesType: 'candlesticks',
        series: {4: {type: 'line'}}

对于我的数据，我只是添加了第四列整数：

        ["Mon, Aug 10 2015",2080.98,2080.98,2104.18,2105.35, 500],
        ["Tue, Aug 11 2015",2076.49,2102.66,2084.07,2102.66, 500],
        ["Wed, Aug 12 2015",2052.09,2081.10,2086.05,2089.06, 500],
        ["Thu, Aug 13 2015",2078.26,2086.19,2083.39,2092.93, 500],
        ["Fri, Aug 14 2015",2080.61,2083.15,2091.54,2092.45, 500],
        ["Mon, Aug 17 2015",2079.30,2089.70,2102.44,2102.87, 500],
        ["Tue, Aug 18 2015",2094.14,2101.99,2096.92,2103.47, 500],
        ["Wed, Aug 19 2015",2070.53,2095.69,2079.61,2096.17, 500],
        ["Thu, Aug 20 2015",2035.73,2076.61,2035.73,2076.61, 500],
        ["Fri, Aug 21 2015",1970.89,2034.08,1970.89,2034.08, 500],
        ["Mon, Aug 24 2015",1867.01,1965.15,1893.21,1965.15, 500],
        ["Tue, Aug 25 2015",1867.08,1898.08,1867.61,1948.04, 500],
        ["Wed, Aug 26 2015",1872.75,1872.75,1940.51,1943.09, 500],
        ["Thu, Aug 27 2015",1942.77,1942.77,1987.66,1989.60, 500],

也就是说，我的新代码出现以下错误：

Last domain does not have enough data columns (missing 3)

我尝试将系列索引更改为各种值，但没有骰子。

Answer 1

必须设置

series.1

，这个数字不是指某一列，而是一个系列的索引。

会发生什么：默认

serieType

是

candlesticks

，因此第一个系列（索引：

0

）将自动为“烛台”类型...烛台图需要 4 个数据列

当您设置

series.4

时，API将自动创建

series.0

、

series.1

、

series.2

和

series.3

......并且所有这些都将是

candlesticks

让我们将数据列视为数据堆栈。

API 创建系列：

1. serie.0

   
   ...将是

   candlesticks

   ，需要 4 个数据列，前 4 个数据列将从堆栈中删除

2. serie.1

   
   ...还有

   candlesticks

   ，需要 4 个数据列，但堆栈上只剩下 1 个数据列（3 缺失....这就是错误的含义）

Answer 2

我知道这有点老了，但我刚刚遇到了同样的问题。 Molle 博士的回答让我找到了正确的方向，但我认为还需要进一步澄清。

总而言之，你的最后一栏应该放在开头，这样它看起来像：

["Mon, Aug 10 2015",500,2080.98,2080.98,2104.18,2105.35],
["Tue, Aug 11 2015",500,2076.49,2102.66,2084.07,2102.66],
["Wed, Aug 12 2015",500,2052.09,2081.10,2086.05,2089.06],
...

然后在“选项”变量中您可以输入：

seriesType: 'candlesticks',
series: {0: {type: 'line'}}

希望这对将来的其他人有帮助！

Answer 3

作为对 GreenCabbage 关于已接受答案的问题的回答：

所以现在我们在烛台上又添加了一根线。我可以在现有折线图数据之上添加另一组/列折线图数据吗？

            function drawChart(data) {
            if (data == null) return;
            var formattedData = [];
            for (var i = 0; i < data.length; i++) {
                var rowItem = [data[i].date, data[i].low, data[i].open, data[i].close, data[i].high, data[i].line1, data[i].line2, data[i].line3];
                formattedData.push(rowItem);
            }
            var dt = google.visualization.arrayToDataTable(formattedData, true);

            var options = {
                legend: 'none',
                candlestick: {
                    fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                    risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
                },
                chartArea: { left: 40, top: 20, width: '100%', height: '75%' },
                seriesType: 'candlesticks',
                series: { 1: { type: 'line' },
                          2: { type: 'line' },
                          3: { type: 'line' } },
            };

            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

            chart.draw(dt, options);
            }

嗯，这个函数在问题中的主要部分是：

var rowItem = [data[i].date, data[i].low, data[i].open, data[i].close, data[i].high, data[i].line1, data[i].line2, data[i].line3];

和

                    series: { 1: { type: 'line' },
                          2: { type: 'line' },
                          3: { type: 'line' } },

所有其他部分只是为了那些想要以 CTRL+C / CTRL+V 方式学习的人

Answer 4

[Dr.Molle]的回答是正确的

数组中有 6 列 - 前 5 列代表烛台 series.0，最后 6 列代表行 series.1。 因此，您应该将示例中的系列：{4：{type：'line'}}更改为系列：{1：{type：'line'}}

我还添加了 google.charts.load('当前', {'packages':['corechart']}); 在第一行。

所以我有一个图表的工作示例

Saved new version

[1]：https://jsfiddle.net/muk48rfw/