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]">

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

2 个答案: