数据中的 highcharts 字符串：[]

Question

我想在数组中“打印出”我的字符串，但它不起作用。

如果在我的控制台中打印字符串，一切看起来都是正确的。即使我在控制台中复制字符串并将其设置为 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

Answer 1

您的问题从这一行开始：

var concat = "[";

您需要构建一个对象数组（不是字符串），因此，将上一行替换为：

var concat = [];

为了构建对象数组，您可以动态创建每个新对象和push 到数组中：

$.each(title, function (i, l) {
    concat.push({name: l, y: data[i], color: color[i]});
});

现在，如果要打印对象数组，可以使用 JSON.stringify

sn-p：

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