我想在数组中“打印”我的字符串,但它不起作用。
如果在我的控制台中打印字符串,一切看起来都是正确的。即使我在控制台中复制字符串并将其设置为data [],也可以正确构建饼图。为什么源代码会显示变量名而不是字符串?
$( document ).ready(function() {
var jsonCharts = {};
var t = 0;
var title = [];
var d = 0;
var data = [];
var concat = "[";
var len = 0;
var color = ['#425d5f', '#c4ca5d', '#424821', '#878787', '#878e43', '#a5c7c7'];
$(".title").each(function() {
title[t] = $(this).html();
t++;
});
$(".data").each(function() {
data[d] = parseInt($(this).html());
d++;
});
console.log(len);
len = $(title).length;
len--;
$.each( title, function( i, l ){
if(i < len){
concat = concat + '{name: \'' + l + '\', y: ' + data[i] + ', color: \'' + color[i] + '\'}, ';
}else{
concat = concat + '{name: \'' + l + '\', y: ' + data[i] + ', color: \'' + color[i] + '\'}]';
}
});
$(function() {
console.log(concat);
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 680,
width: 680
},
series: [{
innerSize: '65%',
data: [ concat ]
}]
});
});
});
body{
font-family: arial, sans-serif;
}
table {
border-collapse: collapse;
width: 600px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1 style="padding:30px;border-bottom:1px solid #000;">Charts Example</h1>
<h2 style="padding-left:30px;">Subtitle</h2>
<div style="float:left;padding:30px;">
<table id="charts">
<tr>
<th>IN USD</th>
<th>2015</th>
<th>2014</th>
</tr>
<tr>
<td class="title">Area 1</td>
<td class="data">939</td>
<td>980</td>
</tr>
<tr>
<td class="title">Area 2</td>
<td class="data">525</td>
<td>604</td>
</tr>
<tr>
<td class="title">Area 3</td>
<td class="data">242</td>
<td>264</td>
</tr>
<tr>
<td class="title">Area 4</td>
<td class="data">181</td>
<td>183</td>
</tr>
<tr>
<td class="title">Area 5</td>
<td class="data">119</td>
<td>116</td>
</tr>
<tr>
<td class="title">Area 6</td>
<td class="data">23</td>
<td>19</td>
</tr>
<tr>
<td><b>Total</b></td>
<td><b>2,029</b></td>
<td><b>2,166</b></td>
</tr>
</table>
</div>
<div style="float:left;">
<div id="container" style="width: 720px; height: 400px;"></div>
</div>
感谢您的帮助。
祝你好运, Yab86
答案 0 :(得分:2)
您的问题从这一行开始:
var concat = "[";
您需要构建一个对象数组(而不是字符串),因此,请将上一行替换为:
var concat = [];
为了构建对象数组,您可以将每个新对象和push动态创建到数组中:
$.each(title, function (i, l) {
concat.push({name: l, y: data[i], color: color[i]});
});
现在,如果要打印对象数组,可以使用JSON.stringify
摘录:
$(document).ready(function () {
var jsonCharts = {};
var t = 0;
var title = [];
var d = 0;
var data = [];
var concat = [];
var len = 0;
var color = ['#425d5f', '#c4ca5d', '#424821', '#878787', '#878e43', '#a5c7c7'];
$(".title").each(function () {
title[t] = $(this).html();
t++;
});
$(".data").each(function () {
data[d] = parseInt($(this).html());
d++;
});
// console.log(len);
len = $(title).length;
len--;
$.each(title, function (i, l) {
concat.push({name: l, y: data[i], color: color[i]});
});
// console.log(JSON.stringify(concat));
new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
height: 680,
width: 680
},
series: [{
innerSize: '65%',
data: concat
}]
});
});
body {
font-family: arial, sans-serif;
}
table {
border-collapse: collapse;
width: 600px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<h1 style="padding:30px;border-bottom:1px solid #000;">Charts Example</h1>
<h2 style="padding-left:30px;">Subtitle</h2>
<div style="float:left;padding:30px;">
<table id="charts">
<tr>
<th>IN USD</th>
<th>2015</th>
<th>2014</th>
</tr>
<tr>
<td class="title">Area 1</td>
<td class="data">939</td>
<td>980</td>
</tr>
<tr>
<td class="title">Area 2</td>
<td class="data">525</td>
<td>604</td>
</tr>
<tr>
<td class="title">Area 3</td>
<td class="data">242</td>
<td>264</td>
</tr>
<tr>
<td class="title">Area 4</td>
<td class="data">181</td>
<td>183</td>
</tr>
<tr>
<td class="title">Area 5</td>
<td class="data">119</td>
<td>116</td>
</tr>
<tr>
<td class="title">Area 6</td>
<td class="data">23</td>
<td>19</td>
</tr>
<tr>
<td><b>Total</b></td>
<td><b>2,029</b></td>
<td><b>2,166</b></td>
</tr>
</table>
</div>
<div style="float:left;">
<div id="container" style="width: 720px; height: 400px;"></div>
</div>