将json数据与html分开？

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");
            });
        });
    });