"Last domain does not have enough data columns" 为 Google 图表组合烛台图和折线图时

Question

我正在尝试同时呈现 CandleStick 图表和折线图。

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

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

我所做的是，在我的烛台代码之上，我添加了 candlesticks 的默认系列类型，并将第 5 列指定为折线图

        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）将自动成为 "candlesticks" 类型...烛台-图表需要 4 个数据列

当您设置 series.4 时，API 将自动创建 series.0、series.1、series.2 和 series.3 ....并且所有这些都将是 candlesticks

让我们把数据列看成一堆数据。

API 创建系列：

serie.0
...将是 candlesticks ，需要 4 个数据列，前 4 个数据列将从堆栈中删除
serie.1
...也 candlesticks，需要 4 个数据列，但堆栈中只剩下 1 个数据列（3 丢失 ...这就是错误所在意思是)

Answer 2

我知道这有点老了，但我运行遇到了同样的问题。 Dr.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],
...

然后在你的 'options' 变量中你可以输入：

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

希望这对以后的其他人有所帮助！

Answer 3

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

So right now we added one more line to the candlestick. Could I add another set/column of line chart data on top of the existing?

            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方式学习的人使用

"Last domain does not have enough data columns" 为 Google 图表组合烛台图和折线图时

"Last domain does not have enough data columns" when combining Candlestick and Line chart for Google Charts

javascript

css

google-visualization