从html分离json数据？

Question

我是新来的图表和图表，看来这并没有变得更容易。

我使用的是AnyChart图表，但json嵌入在html中。我想分开它，以便从MyFile.json中读取。

下面是呈现图表的JavaScript。这个伟大的工程：

anychart.onDocumentReady(function() { 

    var dataTable = anychart.data.table("Date", "dd/MM/yyyy"); 

    dataTable.addData([ 
     {"Date":"01/01/2017","Cars":12,"Bikes":143,"Trucks":7}, 
     {"Date":"01/02/2017","Cars":30,"Bikes":171,"Trucks":3}, 
     {"Date":"01/03/2017","Cars":50,"Bikes":157,"Trucks":9}, 
     {"Date":"01/04/2017","Cars":26,"Bikes":194,"Trucks":2}, 
     {"Date":"01/05/2017","Cars":15,"Bikes":192,"Trucks":8} 
     ]); 

    var mapping1 = dataTable.mapAs({'value': "Cars"}); 
    var mapping2 = dataTable.mapAs({'value': "Bikes"}); 
    var mapping3 = dataTable.mapAs({'value': "Trucks"}); 

    chart = anychart.stock(); 
    var plot = chart.plot(); 

    scale1 = anychart.scales.linear(); 
    scale1.maximum(10); 
    plot.yAxis(1).enabled(true); 
    plot.yAxis(1).orientation("right"); 
    plot.yAxis(1).scale("right"); 

    line1 = plot.line(mapping1).name("Cars"); 
    line2 = plot.line(mapping2).name("Bikes"); 

    column = plot.column(mapping3).name("Trucks"); 
    column.yScale(scale1); 
    plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color()); 

    chart.scroller().line(mapping1); 

    chart.title("Use mouse to draw zoom marquee"); 
    chart.container("container").draw(); 

    chart.startZoomMarquee(true, false); 

    chart.listen("dblclick", function(){ 
     chart.selectRange("max"); 
    }); 

}); 

在此之后link，我想这一点，但我得到了错误SyntaxError: missing) after argument list /AnyChart/index.html:71：

anychart.onDocumentReady(anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", 
    function(data) { 

     // define a table with "Date" field as argument 
    // and date time format defined in the second parameter 
    var dataTable = anychart.data.table("Date", "dd/MM/yyyy"); 

    // add data to the table 
    dataTable.addData([ 
     {"Date":"01/01/2017","Cars":12,"Bikes":143,"Trucks":7}, 
     {"Date":"01/02/2017","Cars":30,"Bikes":171,"Trucks":3}, 
     {"Date":"01/03/2017","Cars":50,"Bikes":157,"Trucks":9}, 
     {"Date":"01/04/2017","Cars":26,"Bikes":194,"Trucks":2}, 
     {"Date":"01/05/2017","Cars":15,"Bikes":192,"Trucks":8} 
     ]); 

     // define three mappings from the data 
    var mapping1 = data.mapAs({'value': "Cars"}); 
    var mapping2 = data.mapAs({'value': "Bikes"}); 
    var mapping3 = data.mapAs({'value': "Trucks"}); 

编辑： 我修改的JavaScript，但没有显示出来。 console.log(data);显示数据阵列：

anychart.onDocumentReady(function(){ 
    anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", function(data) { 
     console.log(data); 
     var dataTable = anychart.data.table(); 
     dataTable.addData(data); 
     var mapping1 = dataTable.mapAs({'value': "Cars"}); 
     var mapping2 = dataTable.mapAs({'value': "Bikes"}); 
     var mapping3 = dataTable.mapAs({'value': "Trucks"}); 
     chart = anychart.stock(); 
     var plot = chart.plot(); 

     scale1 = anychart.scales.linear(); 
     scale1.maximum(10); 
     plot.yAxis(1).enabled(true); 
     plot.yAxis(1).orientation("right"); 
     plot.yAxis(1).scale("right"); 

     line1 = plot.line(mapping1).name("Cars"); 
     line2 = plot.line(mapping2).name("Bikes"); 

     column = plot.column(mapping3).name("Trucks"); 
     column.yScale(scale1); 
     plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color()); 

     chart.scroller().line(mapping1); 

     chart.title("Use mouse to draw zoom marquee"); 
     chart.container("container").draw(); 

     chart.startZoomMarquee(true, false); 

     chart.listen("dblclick", function(){ 
      chart.selectRange("max"); 
     }); 
    }) 
}); 

任何帮助表示赞赏。

Answer 1

我在语法上看到问题，anychart.onDocumentReady需要回调函数。

anychart.onDocumentReady(function(){ 
    //Your Stuff. 
}); 

和loadJsonFile方法的语法如下。

anychart.data.loadJsonFile("<URL>", <callbackFunction>) 

所以试试下面的语法。

anychart.onDocumentReady(function(){ 
    anychart.data.loadJsonFile("http://Server/Erase.svc/GetData", function(data) { 
     //Chart stuff 
    }) 
}); 

我希望它应该适用于上述语法。

Answer 2

var dataTable = anychart.data.table（“Date”，“dd/MM/yyyy”）;

Answer 3

此示例http://static.anychart.com/demos/JsonBasic/index.html显示正确的代码：

anychart.onDocumentReady(function() { 

     anychart.data.loadJsonFile("MyFile.json", function(data) { 

       // define a table with "Date" field as argument 
      // and date time format defined in the second parameter 
      var dataTable = anychart.data.table("Date", "dd/MM/yyyy"); 

      // add data to the table 
      dataTable.addData(data); 

       // define three mappings from the data 
      var mapping1 = dataTable.mapAs({'value': "Cars"}); 
      var mapping2 = dataTable.mapAs({'value': "Bikes"}); 
      var mapping3 = dataTable.mapAs({'value': "Trucks"}); 

       // create chart 
      chart = anychart.stock(); 
      // one plot ont the chart, can have several if needed 
      var plot = chart.plot(); 

       // add the second scale and axis 
      scale1 = anychart.scales.linear(); 
      scale1.maximum(500); 
      plot.yAxis(1).enabled(true); 
      plot.yAxis(1).orientation("right"); 
      plot.yAxis(1).scale("right"); 

       // two line series 
      line1 = plot.line(mapping1).name("Cars"); 
      line2 = plot.line(mapping2).name("Bikes"); 

      // third series is column 
      // it is bound to second scale 
      column = plot.column(mapping3).name("Trucks"); 
      column.yScale(scale1); 
      // color second scale as the series 
      // it is bound to - optional 
      plot.yAxis(1).stroke(column.color()).ticks().stroke(column.color()); 

       // draw mini series, use data from column 
      // but draw as anything 
      chart.scroller().line(mapping1); 

      chart.title("Use mouse to draw zoom marquee"); 
      chart.container("container").draw(); 

      // Starts zoom marquee mode 
      chart.startZoomMarquee(true, false); 

      // listen for double click and zoom out for handier navigation 
      chart.listen("dblclick", function(){ 
       chart.selectRange("max"); 
      }); 
     }); 
    });