Обновление данных на графике amChart из данных в элементе DIV

У меня возникли проблемы с графиком JavaScript и amCharts.

Чего я пытаюсь добиться, так это перезагрузить линейный график amChart новыми данными из элемента DIV. На моей последней странице этот элемент DIV будет динамически обновляться и скрываться, поэтому конечный пользователь его не увидит. График нужно перерисовывать без перезагрузки страницы.

У меня есть страница JSFiddle с примером моих попыток перезагрузить данные.

http://jsfiddle.net/gnuoynomis/Se2UE/1/

Я пытался:

  • Создавайте объекты из точек и добавляйте их в строку, создавая строку объектов, но, похоже, это не загружается в график.

    function LoadNewDataFromDIV_V1()
    {
      //This function attempts to use a string of objects to pass to the dataprovider setting
      var ChartData = document.getElementById("NewData").innerHTML;
      var CD = ChartData.split("},{");    //Split the string on the different day elements
    
      var NewChartData = "";
      for(i=0; i<CD.length; i++)
      {
        var D = CD[i];
        D = D.replace("{","");    //Remove any additional { that may exist to help with the formating later
        D = D.replace("}","");    //Remove any additional } that may exist to help with the formating later
        D = "{" + D + "}";        //Add a { and } to reformat the line correctly from the splitting
    
        if(NewChartData != "")
          NewChartData += ",";
        NewChartData += JSON.parse(D);    //Add the parsed object to the data string
      }
    
      chart.dataProvider = NewChartData;    //Update graph data
      chart.validateData();    //Revalidate chart data
    }
    
  • Я также попытался добавить объекты в массив и попытался передать это, но все равно не повезло.

    function LoadNewDataFromDIV_V2()
    {
      //This function attempts to use an array to store the data and pass this to the dataprovider setting
      var ChartData = document.getElementById("NewData").innerHTML;
      var CD = ChartData.split("},{");    //Split the string on the different day elements
    
      var NewChartDataArray = [];
      for(i=0; i<CD.length; i++)
      {
        var D = CD[i];
        D = D.replace("{","");    //Remove any additional { that may exist to help with the formating later
        D = D.replace("}","");    //Remove any additional } that may exist to help with the formating later
        D = "{" + D + "}";        //Add a { and } to reformat the line correctly from the splitting
    
        NewChartDataArray.push(D);    //Push the data to the array
      }
    
      chart.dataProvider = NewChartDataArray;    //Update graph data
      chart.validateData();    //Revalidate chart data
    }
    

Мой сброс графика работает отлично, если я добавляю всю строку прямо вручную, и это то, что я пытаюсь воспроизвести с помощью других методов.

Если кто-то может указать, что я делаю неправильно, то я был бы очень благодарен. Я также открыт для любых предложений, если вы считаете, что я мог бы сделать это лучше.


person Simon    schedule 06.06.2014    source источник


Ответы (1)


рабочая скрипка

http://jsfiddle.net/Se2UE/2/

суть моего изменения здесь

var NewChartDataArray = [];
  for(i=0; i<CD.length; i++)
  {
    var D = CD[i];
    D = D.replace("{","");
    D = D.replace("}","");
    D = "{" + D + "}";

    NewChartDataArray.push(JSON.parse(D));
  }

объявите NewChartDataArray как массив, а не строку, затем добавьте объект в массив. У вас был массив строк, ваша библиотека ожидает массив объектов

см. это

person faby    schedule 06.06.2014