堆栈内存溢出
  繁体   English   中英

Google可视化-如何联接多个数据表？

[英]Google Visualisation - how to join multiple DataTables?

 原文  2016-11-19 12:22:35  4   1    javascript/ jquery/ join/ google-visualization

问题描述

我正在尝试使用Google Visualization Api创建包含多条线的图表。 我使用JSON将数据添加到图表中。

开头创建了多个数据表-表的数量等于JSON键的数量。

编辑：我已经找到了原始问题的答案-没有循环。 所以答案 -答案是关于在一张图表中绘制两条线。 在注释中，有一个答案是如何使用多行代码-这个JSFiddle： JSFiddle-多行代码但是我仍然不知道如何在我的情况下使用此答案。

问题在于它只画两条线（第一条和最后一条）？ 我想这是由于以下原因造成的： 

joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], [1], [1]);

这是尝试连接所有DataTable的尝试，因此所有线在图表上均应可见。 但实际上，我不知道为什么它无法正常工作。

加入文件： 加入

这是整个加入循环： 

    var joinedData = datas[0];
    $.each(datas, function (index, data1) {
        if (index != 0) {
            joinedData = google.visualization.data.join(joinedData, data1, 'full', [[0, 0]], [1], [1]);
        }
    });

这就是整个脚本-或更好的JSFIDDLE 

function drawChart() {
        var google_chart_json = {"Whirpool.cz": [[[2016, 11, 2], 156.0], [[2016, 11, 3], 69.0], [[2016, 11, 4], 126.0], [[2016, 11, 5], 67.0], [[2016, 11, 6], 97.0], [[2016, 11, 7], 193.0], [[2016, 11, 8], 96.0], [[2016, 11, 9], 64.0], [[2016, 11, 10], 117.0], [[2016, 11, 11], 190.0]], "Mall.cz": [[[2016, 11, 2], 95.0], [[2016, 11, 3], 98.0], [[2016, 11, 4], 158.0], [[2016, 11, 5], 160.0], [[2016, 11, 6], 191.0], [[2016, 11, 7], 106.0], [[2016, 11, 8], 51.0], [[2016, 11, 9], 158.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 154.0]], "Mall.sk": [[[2016, 11, 2], 72.0], [[2016, 11, 3], 108.0], [[2016, 11, 4], 175.0], [[2016, 11, 5], 81.0], [[2016, 11, 6], 123.0], [[2016, 11, 7], 188.0], [[2016, 11, 8], 52.0], [[2016, 11, 9], 196.0], [[2016, 11, 10], 199.0], [[2016, 11, 11], 117.0]], "Teshop.cz": [[[2016, 11, 2], 93.0], [[2016, 11, 3], 71.0], [[2016, 11, 4], 59.0], [[2016, 11, 5], 101.0], [[2016, 11, 6], 86.0], [[2016, 11, 7], 139.0], [[2016, 11, 8], 110.0], [[2016, 11, 9], 75.0], [[2016, 11, 10], 183.0], [[2016, 11, 11], 156.0]], "Gamepro.cz": [[[2016, 11, 2], 89.0], [[2016, 11, 3], 104.0], [[2016, 11, 4], 62.0], [[2016, 11, 5], 190.0], [[2016, 11, 6], 172.0], [[2016, 11, 7], 109.0], [[2016, 11, 8], 183.0], [[2016, 11, 9], 88.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 106.0]], "Gamepro.sk": [[[2016, 11, 2], 133.0], [[2016, 11, 3], 173.0], [[2016, 11, 4], 102.0], [[2016, 11, 5], 151.0], [[2016, 11, 6], 119.0], [[2016, 11, 7], 172.0], [[2016, 11, 8], 139.0], [[2016, 11, 9], 177.0], [[2016, 11, 10], 174.0], [[2016, 11, 11], 141.0]], "Datart.cz": [[[2016, 11, 2], 77.0], [[2016, 11, 3], 120.0], [[2016, 11, 4], 116.0], [[2016, 11, 5], 60.0], [[2016, 11, 6], 179.0], [[2016, 11, 7], 162.0], [[2016, 11, 8], 151.0], [[2016, 11, 9], 123.0], [[2016, 11, 10], 138.0], [[2016, 11, 11], 109.0]], "Ockosice.sk": [[[2016, 11, 2], 83.0], [[2016, 11, 3], 111.0], [[2016, 11, 4], 185.0], [[2016, 11, 5], 199.0], [[2016, 11, 6], 133.0], [[2016, 11, 7], 142.0], [[2016, 11, 8], 61.0], [[2016, 11, 9], 74.0], [[2016, 11, 10], 168.0], [[2016, 11, 11], 128.0]], "Bestmarket.sk": [[[2016, 11, 2], 174.0], [[2016, 11, 3], 154.0], [[2016, 11, 4], 180.0], [[2016, 11, 5], 87.0], [[2016, 11, 6], 193.0], [[2016, 11, 7], 105.0], [[2016, 11, 8], 106.0], [[2016, 11, 9], 115.0], [[2016, 11, 10], 185.0], [[2016, 11, 11], 159.0]]};
        var datas = [];
        $.each(google_chart_json, function (key, val) {
            var domain = key;
            var data = new google.visualization.DataTable();
            data.addColumn('date', domain + 'Date');
            data.addColumn('number', domain);


            $.each(val, function (_, scan) {
                var year = scan[0][0];
                var month = scan[0][1];
                var day = scan[0][2];
                var price = scan[1];

                data.addRows([
                    [new Date(year, month, day), price]
                ]);
            });
            datas.push(data);
        });
        var joinedData = datas[0];
        $.each(datas, function (index, datatable) {
            console.log('joining index '+index)
            if (index != 0) {
                joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], [1], [1]);
            }
        });


        var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
        chart.draw(joinedData, {
            height: 300,
            width: 600,
            interpolateNulls: true,
            explorer: {
                maxZoomOut: 2,
                keepInBounds: true
            },
        });
    }
    google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

1 个解决方案

解决方案1
 3 已采纳  2016-11-20 14:29:00

首先 ，需要使用最新的库（ loader.js ）
根据发行说明 ...

可以通过jsapi加载程序保留的Google图表版本不再保持一致更新。 从现在开始，请使用新的静态加载器。

包括这个...
<script src="https://www.gstatic.com/charts/loader.js"></script>

不是这个...
<script src="http://www.google.com/jsapi"></script>

这将从...更改load语句
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

至...
google.charts.load('current', {packages: ['corechart'], callback: drawChart});

接下来 ，原因是只有两行（列）进入了最终数据表，
与第五个参数（ dt1Columns ）有关
对于每个联接，仅包含第一个表中的第一个数据列[1]

相反，该参数应随每个联接而增长
[1] ， [1,2] ， [1,2,3]

请参阅以下工作片段... 

 function drawChart() { var google_chart_json = {"Whirpool.cz": [[[2016, 11, 2], 156.0], [[2016, 11, 3], 69.0], [[2016, 11, 4], 126.0], [[2016, 11, 5], 67.0], [[2016, 11, 6], 97.0], [[2016, 11, 7], 193.0], [[2016, 11, 8], 96.0], [[2016, 11, 9], 64.0], [[2016, 11, 10], 117.0], [[2016, 11, 11], 190.0]], "Mall.cz": [[[2016, 11, 2], 95.0], [[2016, 11, 3], 98.0], [[2016, 11, 4], 158.0], [[2016, 11, 5], 160.0], [[2016, 11, 6], 191.0], [[2016, 11, 7], 106.0], [[2016, 11, 8], 51.0], [[2016, 11, 9], 158.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 154.0]], "Mall.sk": [[[2016, 11, 2], 72.0], [[2016, 11, 3], 108.0], [[2016, 11, 4], 175.0], [[2016, 11, 5], 81.0], [[2016, 11, 6], 123.0], [[2016, 11, 7], 188.0], [[2016, 11, 8], 52.0], [[2016, 11, 9], 196.0], [[2016, 11, 10], 199.0], [[2016, 11, 11], 117.0]], "Teshop.cz": [[[2016, 11, 2], 93.0], [[2016, 11, 3], 71.0], [[2016, 11, 4], 59.0], [[2016, 11, 5], 101.0], [[2016, 11, 6], 86.0], [[2016, 11, 7], 139.0], [[2016, 11, 8], 110.0], [[2016, 11, 9], 75.0], [[2016, 11, 10], 183.0], [[2016, 11, 11], 156.0]], "Gamepro.cz": [[[2016, 11, 2], 89.0], [[2016, 11, 3], 104.0], [[2016, 11, 4], 62.0], [[2016, 11, 5], 190.0], [[2016, 11, 6], 172.0], [[2016, 11, 7], 109.0], [[2016, 11, 8], 183.0], [[2016, 11, 9], 88.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 106.0]], "Gamepro.sk": [[[2016, 11, 2], 133.0], [[2016, 11, 3], 173.0], [[2016, 11, 4], 102.0], [[2016, 11, 5], 151.0], [[2016, 11, 6], 119.0], [[2016, 11, 7], 172.0], [[2016, 11, 8], 139.0], [[2016, 11, 9], 177.0], [[2016, 11, 10], 174.0], [[2016, 11, 11], 141.0]], "Datart.cz": [[[2016, 11, 2], 77.0], [[2016, 11, 3], 120.0], [[2016, 11, 4], 116.0], [[2016, 11, 5], 60.0], [[2016, 11, 6], 179.0], [[2016, 11, 7], 162.0], [[2016, 11, 8], 151.0], [[2016, 11, 9], 123.0], [[2016, 11, 10], 138.0], [[2016, 11, 11], 109.0]], "Ockosice.sk": [[[2016, 11, 2], 83.0], [[2016, 11, 3], 111.0], [[2016, 11, 4], 185.0], [[2016, 11, 5], 199.0], [[2016, 11, 6], 133.0], [[2016, 11, 7], 142.0], [[2016, 11, 8], 61.0], [[2016, 11, 9], 74.0], [[2016, 11, 10], 168.0], [[2016, 11, 11], 128.0]], "Bestmarket.sk": [[[2016, 11, 2], 174.0], [[2016, 11, 3], 154.0], [[2016, 11, 4], 180.0], [[2016, 11, 5], 87.0], [[2016, 11, 6], 193.0], [[2016, 11, 7], 105.0], [[2016, 11, 8], 106.0], [[2016, 11, 9], 115.0], [[2016, 11, 10], 185.0], [[2016, 11, 11], 159.0]]}; var datas = []; $.each(google_chart_json, function (key, val) { var domain = key; var data = new google.visualization.DataTable(); data.addColumn('date', domain + 'Date'); data.addColumn('number', domain); $.each(val, function (_, scan) { var year = scan[0][0]; var month = scan[0][1]; var day = scan[0][2]; var price = scan[1]; data.addRows([ [new Date(year, month, day), price] ]); }); datas.push(data); }); var joinedData = datas[0]; var columns = []; $.each(datas, function (index, datatable) { if (index != 0) { columns.push(index); joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], columns, [1]); } }); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(joinedData, { height: 300, width: 600, interpolateNulls: true, explorer: { maxZoomOut: 2, keepInBounds: true }, }); } google.charts.load('current', {packages: ['corechart'], callback: drawChart});  function drawChart() { var google_chart_json = {"Whirpool.cz": [[[2016, 11, 2], 156.0], [[2016, 11, 3], 69.0], [[2016, 11, 4], 126.0], [[2016, 11, 5], 67.0], [[2016, 11, 6], 97.0], [[2016, 11, 7], 193.0], [[2016, 11, 8], 96.0], [[2016, 11, 9], 64.0], [[2016, 11, 10], 117.0], [[2016, 11, 11], 190.0]], "Mall.cz": [[[2016, 11, 2], 95.0], [[2016, 11, 3], 98.0], [[2016, 11, 4], 158.0], [[2016, 11, 5], 160.0], [[2016, 11, 6], 191.0], [[2016, 11, 7], 106.0], [[2016, 11, 8], 51.0], [[2016, 11, 9], 158.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 154.0]], "Mall.sk": [[[2016, 11, 2], 72.0], [[2016, 11, 3], 108.0], [[2016, 11, 4], 175.0], [[2016, 11, 5], 81.0], [[2016, 11, 6], 123.0], [[2016, 11, 7], 188.0], [[2016, 11, 8], 52.0], [[2016, 11, 9], 196.0], [[2016, 11, 10], 199.0], [[2016, 11, 11], 117.0]], "Teshop.cz": [[[2016, 11, 2], 93.0], [[2016, 11, 3], 71.0], [[2016, 11, 4], 59.0], [[2016, 11, 5], 101.0], [[2016, 11, 6], 86.0], [[2016, 11, 7], 139.0], [[2016, 11, 8], 110.0], [[2016, 11, 9], 75.0], [[2016, 11, 10], 183.0], [[2016, 11, 11], 156.0]], "Gamepro.cz": [[[2016, 11, 2], 89.0], [[2016, 11, 3], 104.0], [[2016, 11, 4], 62.0], [[2016, 11, 5], 190.0], [[2016, 11, 6], 172.0], [[2016, 11, 7], 109.0], [[2016, 11, 8], 183.0], [[2016, 11, 9], 88.0], [[2016, 11, 10], 89.0], [[2016, 11, 11], 106.0]], "Gamepro.sk": [[[2016, 11, 2], 133.0], [[2016, 11, 3], 173.0], [[2016, 11, 4], 102.0], [[2016, 11, 5], 151.0], [[2016, 11, 6], 119.0], [[2016, 11, 7], 172.0], [[2016, 11, 8], 139.0], [[2016, 11, 9], 177.0], [[2016, 11, 10], 174.0], [[2016, 11, 11], 141.0]], "Datart.cz": [[[2016, 11, 2], 77.0], [[2016, 11, 3], 120.0], [[2016, 11, 4], 116.0], [[2016, 11, 5], 60.0], [[2016, 11, 6], 179.0], [[2016, 11, 7], 162.0], [[2016, 11, 8], 151.0], [[2016, 11, 9], 123.0], [[2016, 11, 10], 138.0], [[2016, 11, 11], 109.0]], "Ockosice.sk": [[[2016, 11, 2], 83.0], [[2016, 11, 3], 111.0], [[2016, 11, 4], 185.0], [[2016, 11, 5], 199.0], [[2016, 11, 6], 133.0], [[2016, 11, 7], 142.0], [[2016, 11, 8], 61.0], [[2016, 11, 9], 74.0], [[2016, 11, 10], 168.0], [[2016, 11, 11], 128.0]], "Bestmarket.sk": [[[2016, 11, 2], 174.0], [[2016, 11, 3], 154.0], [[2016, 11, 4], 180.0], [[2016, 11, 5], 87.0], [[2016, 11, 6], 193.0], [[2016, 11, 7], 105.0], [[2016, 11, 8], 106.0], [[2016, 11, 9], 115.0], [[2016, 11, 10], 185.0], [[2016, 11, 11], 159.0]]}; var datas = []; $.each(google_chart_json, function (key, val) { var domain = key; var data = new google.visualization.DataTable(); data.addColumn('date', domain + 'Date'); data.addColumn('number', domain); $.each(val, function (_, scan) { var year = scan[0][0]; var month = scan[0][1]; var day = scan[0][2]; var price = scan[1]; data.addRows([ [new Date(year, month, day), price] ]); }); datas.push(data); }); var joinedData = datas[0]; var columns = []; $.each(datas, function (index, datatable) { if (index != 0) { columns.push(index); joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], columns, [1]); } }); var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); chart.draw(joinedData, { height: 300, width: 600, interpolateNulls: true, explorer: { maxZoomOut: 2, keepInBounds: true }, }); } google.charts.load('current', {packages: ['corechart'], callback: drawChart}); 
 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何为Google DataTables编写自定义格式化程序（用于可视化API） Google可视化折线图 - 多行 Google可视化API-基于选择的多个图表 如何在Google可视化数据表中编辑选项？ 如何对一组Google可视化数据进行排序 如何将 Google 可视化查询转化为图表？ Google可视化ColumnChart数据 负责任的Google可视化数据表 Google可视化错误 谷歌可视化图表区域背景
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM