Question

我正在将我网站上的几个折线图更改为areacharts。我今天尝试制作一个，但结果很奇怪。

所有列和行都被动态地添加到visualization.DataTable中，因为我一整天都在测试。我想省去所有人都要仔细检查，以便我手动输入data.addColumn和data.addRow信息。

编辑**在googles测试后，我在下面提供了手动创建的数据表，图表看起来很棒。所以我的代码在循环中添加每一行很可能是问题所在。为了更好地诊断问题，这里是图表的编码数据表数组：

＆＃13;

{"cols":[{"id":"","label":"Date","pattern":"","type":"datetime","p":{}},{"id":"","label":"Marth Wrecker","pattern":"","type":"number","p":{}},{"id":"","label":"Ultimate Melee","pattern":"","type":"number"}],
"rows":
[{"c":[{"v":"Date(2018, 2, 19)"},{"v":15016},{"v":27762}]},{"c":[{"v":"Date(2018, 2, 20)"},{"v":15057},{"v":27883}]},{"c":[{"v":"Date(2018, 2, 15)"},{"v":null},{"v":27319}]},{"c":[{"v":"Date(2018, 2, 16)"},{"v":null},{"v":27445}]},{"c":[{"v":"Date(2018, 2, 17)"},{"v":null},{"v":27571}]},{"c":[{"v":"Date(2018, 2, 18)"},{"v":null},{"v":27681}]}]}

＆＃13;

这是我的图表最终看起来像：

当我设置isStacked: true时，这就是图表的样子：

这是我的代码：

＆＃13;

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});


  function drawReachByUser(){
  
	var data = new google.visualization.DataTable();
	
	data.addColumn('datetime', 'Date');
	data.addColumn ('number', 'Marth Wrecker');   
	data.addColumn ('number', 'Ultimate Melee'); 
	
	data.addRow([new Date(2018, 03, 15), 0, 27319]);
	data.addRow([new Date(2018, 03, 16), 0, 27445]);
	data.addRow([new Date(2018, 03, 17), 0, 27571]);
	data.addRow([new Date(2018, 03, 18), 0, 27681]);
	data.addRow([new Date(2018, 03, 19), 15016, 27762]);
	data.addRow([new Date(2018, 03, 20), 15057, 27883]);
	
	var areachart_options = {
		vaxis: {minvalue: 0},
		series: { 
			0: { color: '#00cc99' },
			1: { color: '#007AFF' }
		}
	};
		
    var chart = new google.visualization.AreaChart(document.getElementById('reach_line_chart'));

    chart.draw(data, areachart_options);
    
  }


</script>

＆＃13;

我已经测试过将空值设置为0，null和false，但是对于所有这些设置，图表似乎仍然很奇怪。

有没有人经历过这个？任何帮助将不胜感激。

Answer 1

所以我比较了小提琴中的数据表数组，我手动将每一行连续添加到我的网站上，我相信我发现了错误。

我使用的循环使用列的相应名称交叉引用我的'numbers'列，以确保我在data.addRow的正确列表中输入整数。日期以错误的顺序添加，导致奇怪的图表。这是我的循环片段，添加了每一行：

    $.each (second_final_array, function(key, value){
        var reach_list =[];
        console.log("hey");
        reach_array_ident= JSON.parse(JSON.stringify(value));
        
        var sponsor_date= key;
        var sponsor_date_parse= sponsor_date.replace(/-/g, ",");
        var date_parse = sponsor_date_parse.split(",");
        
        var years = date_parse[0];
        var months= date_parse[1];      
        var days = date_parse[2];  

        grid_count += 1;
        
        reach_list.push(new Date(years, months, days));
        $.each(cc_name_array, function(key, value){
            var num = parseInt(value);
            console.log(num);
            
            var num_reach= second_final_array[sponsor_date][num];
            
            //var reach_one = reach_array_ident
            if (typeof num_reach !== 'undefined') {
                num_reach_verified= num_reach;
            }else{
                num_reach_verified= 0;
            }            
        
            reach_list.push(num_reach_verified);           
               
        
        });
        
        data.addRow(reach_list);

我只是订购了对象日期键，现在我的图表很干净：

    var test_final_array= Object.entries(final_array);

    var orderedDates = {};
    var second_final_array = Object.keys(final_array).sort(function(a, b) {
        return moment(b, 'YYYY/MM/DD').toDate() - moment(a, 'YYYY/MM/DD').toDate();
    }).forEach(function(key) {
        orderedDates[key] = final_array[key];
    })
    Object.keys(orderedDates).forEach(function(date) {
       document.body.innerHTML += date + "<br />"
    });
    console.log("hopefully sorted array");
    //var second_final_array= JSON.parse(JSON.stringify(second_final_array));
    console.log(orderedDates);
    

    var grid_count=0;
    
    $.each (orderedDates, function(key, value){
        console.log ("here is the value");
        console.log(value);
        var reach_list =[];
        
        reach_array_ident= JSON.parse(JSON.stringify(value));
        
        var sponsor_date= key;
        var sponsor_date_parse= sponsor_date.replace(/-/g, ",");
        var date_parse = sponsor_date_parse.split(",");
        
        var years = date_parse[0];
        var months= date_parse[1] -1;      
        var days = date_parse[2];  

        grid_count += 1;
        
        reach_list.push(new Date(years, months, days));
        $.each(cc_name_array, function(key, value){
            var num = parseInt(value);
            console.log(num);
            
            var num_reach= orderedDates[sponsor_date][num];
            
            //var reach_one = reach_array_ident
            if (typeof num_reach !== 'undefined') {
                num_reach_verified= num_reach;
            }else{
                num_reach_verified= 0;
            }            
        
            reach_list.push(num_reach_verified);           
               
        
        });
        
        data.addRow(reach_list);
        console.log("here is the reach list");
        console.log(reach_list);
        
        
    });

Google Visualization AreaChart显示非常奇怪的结果

1 个答案: