Question

我的HighCharts图表上有一个带有JSON数据的问题。为了解释一下：我有一个表单，当我提交这个表单时，我用Ajax将数据发送到我的控制器，我对待它们并返回我的highcharts图的新数据数组，但是当我使用{{1}时使用我的新数组函数图表消失，新数据不显示。

这是我的ajax函数和我的测试，用于将新数据设置到我的图表中：

setData

我的所有数据都存储在名为$('#gestion .l-gestion-content-form #form-add-informations .btn-validation').click(function(e) { e.preventDefault(); var chart = $('#hightchart-graf').highcharts(); var dataActionForm = $('#form-add-informations').attr('action').split("/"); var url_ajax = Routing.generate('gestion_view', { dossier: dataActionForm[4], fille: dataActionForm[5] }); var formData = $('#form-add-informations').serializeArray(); $.ajax({ type: "POST", dataType: 'json', url: url_ajax, data: formData, success: function(msg) { console.log(msg['infosArray']); var test = [ msg['infosArray'].join(',') ]; console.log(test); console.log('---------------------------------------------'); console.log(msg.infosArray); var test2 = msg.infosArray.join(','); var test3 = test2.replace('"', ''); console.log(test2); chart.series[0].setData( [ msg.infosArray.join(',') ] ); //[ {{ msg.infosArray | join(',') }} ] }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert('ERROR'); } }); });或msg.infosArray的数组中，第一个msg['infosArray']返回如下数组：

console.log

所以我试图逃离["[Date.UTC(2015,11,23),80.00]", "[Date.UTC(2015,11,23),89.00]", "[Date.UTC(2015,11,25),150.00]", "[Date.UTC(2015,11,28),45.00]", "[Date.UTC(2015,11,29),169.00]", "[Date.UTC(2015,11,29),189.00]", "[Date.UTC(2015,11,29),196.00]", "[Date.UTC(2015,11,29),200.00]", "[Date.UTC(2015,11,29),205.00]", "[Date.UTC(2015,11,30),210.00]", "[Date.UTC(2015,11,31),225.00]", "[Date.UTC(2016,0,1),250.00]", "[Date.UTC(2016,0,2),25.00]", "[Date.UTC(2016,0,3),259.00]", "[Date.UTC(2016,0,5),25.00]", "[Date.UTC(2016,0,6),250.00]", "[Date.UTC(2016,0,7),25.00]", "[Date.UTC(2016,0,8),250.00]", "[Date.UTC(2016,0,9),25.00]", "[Date.UTC(2016,0,10),250.00]", "[Date.UTC(2016,0,11),25.00]", "[Date.UTC(2016,0,12),250.00]", "[Date.UTC(2016,0,25),25.00]", "[Date.UTC(2016,0,26),250.00]"]和"或加入数组但没有任何效果。有人知道如何设置新数据，或者我在哪里设置了故障？也许我的控制器收到了不好的回复？

由于

Answer 1

您需要将javascript代码的字符串转换为javascript数组。

我写了一个将字符串转换为javascript代码的演示版本。并按预期绘制图表。不要把注意力集中在它是虚拟数据的标签上。

JSFiddle Demo

    $(function () {
  var data = ["[Date.UTC(2015,11,23),80.00]", "[Date.UTC(2015,11,23),89.00]", "[Date.UTC(2015,11,25),150.00]", "[Date.UTC(2015,11,28),45.00]", "[Date.UTC(2015,11,29),169.00]", "[Date.UTC(2015,11,29),189.00]", "[Date.UTC(2015,11,29),196.00]", "[Date.UTC(2015,11,29),200.00]", "[Date.UTC(2015,11,29),205.00]", "[Date.UTC(2015,11,30),210.00]", "[Date.UTC(2015,11,31),225.00]", "[Date.UTC(2016,0,1),250.00]", "[Date.UTC(2016,0,2),25.00]", "[Date.UTC(2016,0,3),259.00]", "[Date.UTC(2016,0,5),25.00]", "[Date.UTC(2016,0,6),250.00]", "[Date.UTC(2016,0,7),25.00]", "[Date.UTC(2016,0,8),250.00]", "[Date.UTC(2016,0,9),25.00]", "[Date.UTC(2016,0,10),250.00]", "[Date.UTC(2016,0,11),25.00]", "[Date.UTC(2016,0,12),250.00]", "[Date.UTC(2016,0,25),25.00]", "[Date.UTC(2016,0,26),250.00]"];
  //t = t.map(function(element){return eval(element);});
  data = data.map(function (e) {
    return eval(e);
  });
  data = data.map(function (e) {
    return [(new Date(e[0])).toLocaleString(), e[1]]
  });
  var categories = data.map(function (e) {
    return (new Date(e[0])).toLocaleString()
  });
  // t[0] = [date = new Date(t[0])];
  $('#container').highcharts({
    title: {
      text: 'Monthly Average Temperature',
      x: -20 //center
    },
    subtitle: {
      text: 'Source: WorldClimate.com',
      x: -20
    },
    xAxis: {
      categories: categories
    },
    yAxis: {
      title: {
        text: 'Temperature (°C)'
      },
      plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
      }]
    },
    tooltip: {
      valueSuffix: '°C'
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    series: [{
      name: 'Tokyo',
      data: data
    }]
  });
});

在Symfony 2上使用HighCharts setData的Ajax

1 个答案: