亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 AmCharts 中切換到 JSON 數據不起作用

在 AmCharts 中切換到 JSON 數據不起作用

DIEA 2024-01-18 14:29:06
Amcharts 的新用戶(和編程?。┎L試使用他們的示例之一(https://codepen.io/team/amcharts/pen/gOpWroQ),  ,但是當我從外部 JSON 文件中提取數據時,它無法正常工作。JSON 結構和格式是正確的,我將數據從 JSON 文件復制到 var data [] 中,并且工作正常。筆在這里:(https://codepen.io/moneycarlo/pen/zYKdyGz但是我無法托管 json 文件)。第 10 行是我加載 JSON 數據的位置,但如果我刪除 var 數據信息并取消注釋第 10 行,結果不會繪制 4 行。相反,它是 1 條線,上面有每個日期的多個堆疊點。我猜這是預處理器中的東西。我的印象是,當您從 JSON 等外部數據加載時,它會自動分配給 data 屬性,并且這些函數的工作方式相同。我缺少什么?am4core.useTheme(am4themes_animated);// Source datavar data = [  {"date":"2019-07-05","domain":"aol.com","hits":"119489"},{"date":"2019-07-05","domain":"gmail.com","hits":"295834"},{"date":"2019-07-05","domain":"hotmail.com","hits":"8000"},{"date":"2019-07-05","domain":"yahoo.com","hits":"324263"},{"date":"2019-07-06","domain":"aol.com","hits":"195042"},{"date":"2019-07-06","domain":"gmail.com","hits":"258402"},{"date":"2019-07-06","domain":"hotmail.com","hits":"100000"},{"date":"2019-07-06","domain":"yahoo.com","hits":"427865"}];// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);//chart.dataSource.url = "data_1.php";// Create axesvar dateAxis = chart.xAxes.push(new am4charts.DateAxis());dateAxis.renderer.grid.template.location = 0;dateAxis.renderer.minGridDistance = 30;var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());chart.colors.list = [  am4core.color("red"),  am4core.color("blue"),  am4core.color("green")];// Create seriesfunction createSeries(field, name, id) {  var series = chart.series.push(new am4charts.LineSeries());  series.dataFields.valueY = "hits";  series.dataFields.dateX = "date";  series.name = name;  series.tooltipText = "{dateX}: [b]{valueY}[/]";  series.strokeWidth = 2;    var bullet = series.bullets.push(new am4charts.CircleBullet());  bullet.circle.stroke = am4core.color("#fff");  bullet.circle.strokeWidth = 2;
查看完整描述

1 回答

?
牧羊人nacy

TA貢獻1862條經驗 獲得超7個贊

dataSource將數據分配到data圖表對象的數組中,而不是像代碼的其余部分那樣分配到系列中。您需要掛鉤數據源的parseended事件并使用現有beforedatavalidated代碼處理每個系列。您還需要跟蹤idcreateSeries 方法中的值,因為它在事件中不可用parseended:


chart.dataSource.events.on('parseended', function(ev){

  // process parsed data into each series' data array

  ev.target.component.series.each(function(series) {

    var source = ev.target.data;

    var data = [];

    for(var i = 0; i < source.length; i++) {

      var row = source[i];

      if (row.domain == series.id) {

        data.push(row);

      }

    }

    series.data = data;

  });

  // clear out data array so that it isn't re-assigned to the chart

  // data array

  ev.target.data = [];

});


// ...


function createSeries(field, name, id) {

  var series = chart.series.push(new am4charts.LineSeries());

  series.dataFields.valueY = "hits";

  series.dataFields.dateX = "date";

  series.id = id; //store id for later

  series.name = name;

  series.tooltipText = "{dateX}: [b]{valueY}[/]";

  series.strokeWidth = 2;

  

  var bullet = series.bullets.push(new am4charts.CircleBullet());

  bullet.circle.stroke = am4core.color("#fff");

  bullet.circle.strokeWidth = 2;


  return series;

}

代碼筆


查看完整回答
反對 回復 2024-01-18
  • 1 回答
  • 0 關注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號