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

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>