Question

我正在使用从JSON字符串获取数据的图表示例。我正在计算图表将要使用的最终JSON（称为data2）。

问题是我在javascript部分构建图表时无法使用数组（data2）。它工作正常，如下面的代码段所示。我需要做的是将JS脚本的23d行之后的静态JSON替换为数组data2。这是我开始研究的基本片段：

var json_data= {"headers":["Day","Hobby","Rate"],"rows":[["2017-10-16 00:00:00.0","beer",0.15824918844270675],["2017-10-16 00:00:00.0","push",0.10932372179344997],["2017-10-17 00:00:00.0","beer",0.16243707878321656],["2017-10-17 00:00:00.0","push",0.12342467710200489],["2017-10-18 00:00:00.0","beer",0.1701333117371019],["2017-10-18 00:00:00.0","push",0.13646302215695214],["2017-10-19 00:00:00.0","beer",0.1691911053818885],["2017-10-19 00:00:00.0","push",0.13529176147742863],["2017-10-20 00:00:00.0","push",0.12471145913670185],["2017-10-20 00:00:00.0","beer",0.16660114595720843],["2017-10-21 00:00:00.0","beer",0.1632134150509216],["2017-10-21 00:00:00.0","push",0.12104479125233003],["2017-10-22 00:00:00.0","push",0.11789599576807194],["2017-10-22 00:00:00.0","beer",0.15304531708971758],["2017-10-23 00:00:00.0","push",0.12068839662857922],["2017-10-23 00:00:00.0","beer",0.16865158102680616],["2017-10-24 00:00:00.0","beer",0.16968791058133556],["2017-10-24 00:00:00.0","push",0.12554102534428885],["2017-10-25 00:00:00.0","push",0.1277794674703459],["2017-10-25 00:00:00.0","beer",0.16345087602572633]]};

  var platform_data = json_data.rows; 
  var data2 = '[';
  var push_metric = 0;
  var beer_metric = 0;
  for (var i in platform_data)
	{
  	var date = platform_data[i][0];
  	if(platform_data[i][1] == 'push'){push_metric = (platform_data[i][2]*1000).toFixed(0)};
    if(platform_data[i][1] == 'beer'){beer_metric = (platform_data[i][2]*1000).toFixed(0)};
		data2+='{ day: "'+ date+'", '+ 'pushups: '+ push_metric +', '+ 'beers: '+ beer_metric+'},';
	}
  data2+= ']';      



new Morris.Line({
  // ID of the element in which to draw the chart.
  element: "pushups",
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [{ day: "2017-10-16 00:00:00.0", pushups: 0, beers: 158},{ day: "2017-10-16 00:00:00.0", pushups: 109, beers: 158},{ day: "2017-10-17 00:00:00.0", pushups: 109, beers: 162},{ day: "2017-10-17 00:00:00.0", pushups: 123, beers: 162},{ day: "2017-10-18 00:00:00.0", pushups: 123, beers: 170},{ day: "2017-10-18 00:00:00.0", pushups: 136, beers: 170},{ day: "2017-10-19 00:00:00.0", pushups: 136, beers: 169},{ day: "2017-10-19 00:00:00.0", pushups: 135, beers: 169},{ day: "2017-10-20 00:00:00.0", pushups: 125, beers: 169},{ day: "2017-10-20 00:00:00.0", pushups: 125, beers: 167},{ day: "2017-10-21 00:00:00.0", pushups: 125, beers: 163},{ day: "2017-10-21 00:00:00.0", pushups: 121, beers: 163},{ day: "2017-10-22 00:00:00.0", pushups: 118, beers: 163},{ day: "2017-10-22 00:00:00.0", pushups: 118, beers: 153},{ day: "2017-10-23 00:00:00.0", pushups: 121, beers: 153},{ day: "2017-10-23 00:00:00.0", pushups: 121, beers: 169},{ day: "2017-10-24 00:00:00.0", pushups: 121, beers: 170},{ day: "2017-10-24 00:00:00.0", pushups: 126, beers: 170},{ day: "2017-10-25 00:00:00.0", pushups: 128, beers: 170},{ day: "2017-10-25 00:00:00.0", pushups: 128, beers: 163},],
  // The name of the data record attribute that contains x-values.
  xkey: "day",
  parseTime: false,
  // A list of names of data record attributes that contain y-values.
  ykeys: ["pushups", "beers"],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ["Pushups", "Beers"],
  lineColors: ["#373651", "#E65A26"]
});

body {
  background-color: #E0E2DD;
  font-family: helvetica, open-sans;
}

.graph-wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.graph {
  height: 300px;
  width: 100%;
  max-width: 750px;
  padding: 25px;
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="http://stevenlevithan.com/assets/misc/date.format.js"></script>
<div class='graph-wrapper'>
  <div class='graph' id='pushups'></div>
</div>

我关注的问题是JSON数组的格式。更具体地说，在下面的代码片段中，我有两个数组。我只需要更改语法（从每个对象中删除引号）。除非有另一个更简单的解决方案：

var json_data= {"headers":["Day","Hobby","Rate"],"rows":[["2017-10-16 00:00:00.0","beer",158],["2017-10-16 00:00:00.0","pushup",109],["2017-10-17 00:00:00.0","beer",162],["2017-10-17 00:00:00.0","pushup",123],["2017-10-18 00:00:00.0","beer",170],["2017-10-18 00:00:00.0","pushup",136],["2017-10-19 00:00:00.0","beer",169],["2017-10-19 00:00:00.0","pushup",135],]};

  var platform_data = json_data.rows; 
  var pushup_metric = 0;
  var beer_metric = 0;
	var data2 = [];
 
  
  for (var i in platform_data)
	{
  	var date = platform_data[i][0];
  	if(platform_data[i][1] == 'push'){pushup_metric = platform_data[i][1]};
    if(platform_data[i][1] == 'beer'){beer_metric = platform_data[i][2]};
    object = '{ day: "'+ date+'", '+ '"pushups": '+ pushup_metric +', '+ '"beers": '+ beer_metric+'}';
		data2.push(object);
	}
  

var data = [{ day: "2017-10-16 00:00:00.0", pushups: 0, beers: 158},{ day: "2017-10-16 00:00:00.0", pushups: 109, beers: 158},{ day: "2017-10-17 00:00:00.0", pushups: 109, beers: 162},{ day: "2017-10-17 00:00:00.0", pushups: 123, beers: 162},{ day: "2017-10-18 00:00:00.0", pushups: 123, beers: 170},{ day: "2017-10-18 00:00:00.0", pushups: 136, beers: 170},{ day: "2017-10-19 00:00:00.0", pushups: 136, beers: 169},{ day: "2017-10-19 00:00:00.0", pushups: 135, beers: 169},];

  console.log(data);
 

	console.log(data2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.0/morris.min.js"></script>



<div id='data2'></div> <br><br> 

<div id='data1'></div> <br><br>

Answer 1

不要尝试使用字符串和字符串连接“构建”Javascript对象。

只需将对象推送到数组并使用JSON：

object = { day: date, pushups: pushup_metric, ...};
date2.push(object);

从JSON加载图表 - 更改JSON数组的格式

1 个答案: