Highcharts 在使用 document.getElementById 获取变量值后中断

Question

我用Highcharts创建了一个图表，它运行良好，你可以在这里看到它的实际效果：

/*Getting Data*/
var dataQuantity = [8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 27786, 30589, 27989, 28141, 28141, 28141, 28141];
var dataMv = [19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 19.69, 16.66, 16.06, 16.66, 16.66, 16.66, 16.66, 16.66];
var dataDate = [1501457113, 1501459513, 1501461913, 1501464313, 1501466713, 1501469113, 1501471513, 1501473913, 1501476313, 1501478713, 1501481113, 1501483513, 1501485913, 1501488313, 1501490713, 1501493113, 1501495513, 1501497913];
var myChart = null;
$(document).ready(function() {
myChart = Highcharts.chart('chart', {
chart: {
type: 'line'
},
title: {
text: ''
},
xAxis: {
categories: dataDate
},
yAxis: [{
title: {
text: 'Market Value'
}
}, {
title: {
text: 'Quantity'
},
opposite: true
}],
series: [{
name: 'Market Value',
yAxis: 0,
data: dataMv
}, {
name: 'Quantity',
yAxis: 1,
data: dataQuantity
}]
});
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chart" style="width:100%; height:400px;"></div>

我的问题是我的网站是PHP的，所以我将数据传递到javascript的方式是通过在非显示中回显它并使用javascript从中获取价值。我尝试这样做，但它失败了：

/*Getting Data*/
var dataQuantity = [8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 27786, 30589, 27989, 28141, 28141, 28141, 28141];
var dataMv = document.getElementById('JSON-mv').innerHTML;
var dataDate = [1501457113, 1501459513, 1501461913, 1501464313, 1501466713, 1501469113, 1501471513, 1501473913, 1501476313, 1501478713, 1501481113, 1501483513, 1501485913, 1501488313, 1501490713, 1501493113, 1501495513, 1501497913];
var myChart = null;
$(document).ready(function() {
myChart = Highcharts.chart('chart', {
chart: {
type: 'line'
},
title: {
text: ''
},
xAxis: {
categories: dataDate
},
yAxis: [{
title: {
text: 'Market Value'
}
}, {
title: {
text: 'Quantity'
},
opposite: true
}],
series: [{
name: 'Market Value',
yAxis: 0,
data: dataMv
}, {
name: 'Quantity',
yAxis: 1,
data: dataQuantity
}]
});
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="JSON-mv" style="display:none;">[19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,16.66,16.06,16.66,16.66,16.66,16.66,16.66]</div>
<div id="chart" style="width:100%; height:400px;"></div>

我唯一不同的事情是我使用

var dataMv = document.getElementById('JSON-mv').innerHTML;

有了它，dataMv 的值应该与我刚刚将其声明为 dataMv = [x，y，z] 相同，还是不同？

Answer 1

如果您直接使用document.getElementById('JSON-mv').innerHTML其字符串类型，那么您的图表正在中断转换为数组并且应该可以正常工作，一种快速的方法是这个

var dataQuantity = [8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 8327, 27786, 30589, 27989, 28141, 28141, 28141, 28141];
var dataMv = document.getElementById('JSON-mv').innerHTML;
dataMv = dataMv.replace('[','');
dataMv = dataMv.replace(']','');
dataMv = dataMv.split(',');
var dataDate = [1501457113, 1501459513, 1501461913, 1501464313, 1501466713, 1501469113, 1501471513, 1501473913, 1501476313, 1501478713, 1501481113, 1501483513, 1501485913, 1501488313, 1501490713, 1501493113, 1501495513, 1501497913];
var myChart = null;
$(document).ready(function() {
myChart = Highcharts.chart('chart', {
chart: {
type: 'line'
},
title: {
text: ''
},
xAxis: {
categories: dataDate
},
yAxis: [{
title: {
text: 'Market Value'
}
}, {
title: {
text: 'Quantity'
},
opposite: true
}],
series: [{
name: 'Market Value',
yAxis: 0,
data: dataMv
}, {
name: 'Quantity',
yAxis: 1,
data: dataQuantity
}]
});
});
<!-- language: lang-html -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="JSON-mv" style="display:none;">[19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,16.66,16.06,16.66,16.66,16.66,16.66,16.66]</div>
<div id="chart" style="width:100%; height:400px;"></div>

Answer 2

不要将数据放在div 中，而是使其成为隐藏输入的值。

<input type="hidden" id="JSON-mv" value="[19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,19.69,16.66,16.06,16.66,16.66,16.66,16.66,16.66]">