json - Amcharts - 无法加载外部 Json 数据

Question

我正在尝试将外部 json 数据加载到常规 amcharts 折线图中。如果我将完全相同的 Json 数据粘贴到chart.data属性中，它会完美运行。但是当我使用chart.dataSource.url属性并使用相同的 json 数据调用页面时，它不起作用。

带有 JAVASCRIPT 内部数据的片段 - 工作

var chart
var valueAxis
var valueAxisAll


// Create chart instance
    chart = am4core.create("chartdiv", am4charts.XYChart);

// Themes begin
    am4core.useTheme(am4themes_animated);

// Increase contrast by taking evey second color
    //chart.colors.step = 2;

// Create Category axes
    // var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
     var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
     /*
     categoryAxis.baseInterval = {
      timeUnit: "day",
      count: 1
    };
    */

    //categoryAxis.skipEmptyPeriods = true; 
 
    // categoryAxis.dataFields.category = headers[0];

    //categoryAxis.renderer.labels.template.rotation = -45;
    //categoryAxis.renderer.grid.template.location = 0;
    chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
    chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";


// Create Value axis series
    valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    
//create series
    var series = chart.series.push(new am4charts.LineSeries());
    //set x & y
    series.dataFields.valueY ="value";
    series.dataFields.dateX = "date";
    series.name = "Rýchlost v km/h";
    
    //series.fillOpacity = 0.3;
    series.strokeWidth = 2;
    series.stroke = "#4484CE";
    series.tensionX = 1; //smoothen between 0 & 1
    series.yAxis = valueAxis;
    var myBullets = series.bullets.push(new am4charts.CircleBullet());
    myBullets.hideBulletsCount= 10;
    series.bullets.push(new am4charts.CircleBullet());
    series.minBulletDistance = 25;

    series.tooltipText = "{name}: [bold]{valueY}[/]";
    series.tooltip.autoTextColor = false;
    series.tooltip.label.fill = "#3f4652";
    series.tooltip.getFillFromObject = false;
    series.tooltip.fillOpacity = 1.0;
    series.tooltip.background.fillOpacity = 1.0;
   

    //valueAxis settings
    //valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 2;
    //valueAxis.renderer.line.stroke = series.stroke;
    //valueAxis.renderer.labels.template.fill = series.stroke;
    valueAxis.renderer.opposite = false;
    //valueAxis.renderer.grid.template.disabled = true;
    valueAxis.cursorTooltipEnabled = false;

    var gradient = new am4core.LinearGradient();
    gradient.addColor(am4core.color("green"));
    gradient.addColor(am4core.color("yellow"));
    gradient.addColor(am4core.color("red"));
    gradient.rotation = 270;
    //rect.fill = gradient;

    var range = valueAxis.createSeriesRange(series);
    range.value = 0;
    range.endValue = 100;
    range.contents.stroke = chart.colors.getIndex(1);
    range.contents.fill = gradient;
    range.contents.fillOpacity = 0.4;



chart.data = [{"date":"2020-07-27 15:27:10","value":14.3},
{"date":"2020-07-27 15:28:10","value":12.5},
{"date":"2020-07-27 15:29:10","value":13.9},
{"date":"2020-07-27 15:30:10","value":8.6},
{"date":"2020-07-27 15:31:10","value":5.8},
{"date":"2020-07-27 16:27:11","value":12.9},
{"date":"2020-07-27 17:27:11","value":17.6},
{"date":"2020-07-27 17:35:11","value":15.8},
{"date":"2020-07-27 17:45:11","value":19.2},
{"date":"2020-07-27 17:58:11","value":22.5},
{"date":"2020-07-27 18:28:23","value":20.8},
{"date":"2020-07-27 18:38:23","value":18.6},
{"date":"2020-07-27 18:40:23","value":24.8},
{"date":"2020-07-27 18:55:23","value":25.9},
{"date":"2020-07-28 10:28:23","value":33.8},
{"date":"2020-07-28 10:35:59","value":30.4},
{"date":"2020-07-28 10:45:59","value":28.6},
{"date":"2020-07-28 15:56:59","value":35.9},
{"date":"2020-07-28 15:58:59","value":37.5},
{"date":"2020-07-28 16:00:59","value":24.2},
{"date":"2020-07-28 16:27:48","value":32.4},
{"date":"2020-07-28 16:35:48","value":35.2},
{"date":"2020-07-28 16:42:48","value":39.6},
{"date":"2020-07-28 16:45:48","value":40.3},
{"date":"2020-07-28 16:48:48","value":40.6},
{"date":"2020-07-28 16:50:12","value":39.6},
{"date":"2020-07-28 16:51:12","value":35.7},
{"date":"2020-07-28 16:52:12","value":28.5},
{"date":"2020-07-28 16:53:12","value":22.6},
{"date":"2020-07-28 16:54:12","value":15.6},
];

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv" style="width: 90%; height: 300px" ;></div>

带有外部 JSON 数据加载的片段 - 不工作

var chart
var valueAxis
var valueAxisAll


// Create chart instance
    chart = am4core.create("chartdiv_wind", am4charts.XYChart);

// Themes begin
    am4core.useTheme(am4themes_animated);

// Increase contrast by taking evey second color
    //chart.colors.step = 2;

// Create Category axes
    // var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
     var categoryAxis = chart.xAxes.push(new am4charts.DateAxis());
     /*
     categoryAxis.baseInterval = {
      timeUnit: "day",
      count: 1
    };
    */

    //categoryAxis.skipEmptyPeriods = true; 
 
    // categoryAxis.dataFields.category = headers[0];

    //categoryAxis.renderer.labels.template.rotation = -45;
    //categoryAxis.renderer.grid.template.location = 0;
    chart.dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss";
    chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss";


// Create Value axis series
    valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    
//create series
    var series = chart.series.push(new am4charts.LineSeries());
    //set x & y
    series.dataFields.valueY ="value";
    series.dataFields.dateX = "date";
    series.name = "Rýchlost v km/h";
    
    //series.fillOpacity = 0.3;
    series.strokeWidth = 2;
    series.stroke = "#4484CE";
    series.tensionX = 1; //smoothen between 0 & 1
    series.yAxis = valueAxis;
    var myBullets = series.bullets.push(new am4charts.CircleBullet());
    myBullets.hideBulletsCount= 10;
    series.bullets.push(new am4charts.CircleBullet());
    series.minBulletDistance = 25;

    series.tooltipText = "{name}: [bold]{valueY}[/]";
    series.tooltip.autoTextColor = false;
    series.tooltip.label.fill = "#3f4652";
    series.tooltip.getFillFromObject = false;
    series.tooltip.fillOpacity = 1.0;
    series.tooltip.background.fillOpacity = 1.0;
   

    //valueAxis settings
    //valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 2;
    //valueAxis.renderer.line.stroke = series.stroke;
    //valueAxis.renderer.labels.template.fill = series.stroke;
    valueAxis.renderer.opposite = false;
    //valueAxis.renderer.grid.template.disabled = true;
    valueAxis.cursorTooltipEnabled = false;

    var gradient = new am4core.LinearGradient();
    gradient.addColor(am4core.color("green"));
    gradient.addColor(am4core.color("yellow"));
    gradient.addColor(am4core.color("red"));
    gradient.rotation = 270;
    //rect.fill = gradient;

    var range = valueAxis.createSeriesRange(series);
    range.value = 0;
    range.endValue = 100;
    range.contents.stroke = chart.colors.getIndex(1);
    range.contents.fill = gradient;
    range.contents.fillOpacity = 0.4;

  
chart.dataSource.url = "datatemp.asp?co=5";
chart.dataSource.parser = new am4core.JSONParser();
chart.dataSource.parser.options.emptyAs = 0;
chart.dataSource.reloadFrequency = 10000;
chart.dataSource.incremental = true;
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm:ss"

    <script src="//www.amcharts.com/lib/4/core.js"></script>
    <script src="//www.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <div id="chartdiv_wind" style="width: 90%; height: 300px" ;></div>

这是来自 datatemp.asp?co=5 的示例数据

[{"date":"2020-07-27 15:27:10","value":14.3},
{"date":"2020-07-27 15:28:10","value":12.5},
{"date":"2020-07-27 15:29:10","value":13.9},
{"date":"2020-07-27 15:30:10","value":8.6},
{"date":"2020-07-27 15:31:10","value":5.8},
{"date":"2020-07-27 16:27:11","value":12.9},
{"date":"2020-07-27 17:27:11","value":17.6},
{"date":"2020-07-27 17:35:11","value":15.8},
{"date":"2020-07-27 17:45:11","value":19.2},
{"date":"2020-07-27 17:58:11","value":22.5},
{"date":"2020-07-27 18:28:23","value":20.8},
{"date":"2020-07-27 18:38:23","value":18.6},
{"date":"2020-07-27 18:40:23","value":24.8},
{"date":"2020-07-27 18:55:23","value":25.9},
{"date":"2020-07-28 10:28:23","value":33.8},
{"date":"2020-07-28 10:35:59","value":30.4},
{"date":"2020-07-28 10:45:59","value":28.6},
{"date":"2020-07-28 15:56:59","value":35.9},
{"date":"2020-07-28 15:58:59","value":37.5},
{"date":"2020-07-28 16:00:59","value":24.2},
{"date":"2020-07-28 16:27:48","value":32.4},
{"date":"2020-07-28 16:35:48","value":35.2},
{"date":"2020-07-28 16:42:48","value":39.6},
{"date":"2020-07-28 16:45:48","value":40.3},
{"date":"2020-07-28 16:48:48","value":40.6},
{"date":"2020-07-28 16:50:12","value":39.6},
{"date":"2020-07-28 16:51:12","value":35.7},
{"date":"2020-07-28 16:52:12","value":28.5},
{"date":"2020-07-28 16:53:12","value":22.6},
{"date":"2020-07-28 16:54:12","value":15.6},
];

谢谢您的帮助！！！

json - Amcharts - 无法加载外部 Json 数据

0 回答 0

Related

Reference