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

Question

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

所有列和行都使用非常难看的 javascript 动态添加到 visualization.DataTable，因为我一直在测试一整天。我不想让你们都看一遍，所以我手动输入了 data.addColumn 和 data.addRow 信息。

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

{"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}]}]}

这是我的图表最终的样子:

当我设置 isStacked: true 时，图表如下所示:

这是我的代码:

<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>	

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

有人遇到过吗？任何帮助将不胜感激。

Answer 1

因此，我将 fiddle 中的数据表数组与我网站上的连续手动添加的每一行进行了比较，我相信我发现了错误。

我使用了一个循环，该循环将我的“数字”列与列的相应名称交叉引用，以确保我在 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);
        
        
    });