如何使用外部數據繪制多線系列圖表

Question

我正在使用 amcharts4 插件來繪制多線系列圖。 但是繪制的點沒有位於正確的位置（y 軸邊緣的藍點）

這是我得到的輸出圖表。 （請參閱上面的附件）

不確定以下代碼有什么問題。 希望有人可以幫助我。 提前致謝！

var chart = am4core.create("chartdiv", am4charts.XYChart);
//Create axes   
var categoryAxis = chart.xAxes.push(new
am4charts.CategoryAxis());  categoryAxis.dataFields.category = "date";
    categoryAxis.title.text = "Month-Year";
    categoryAxis.title.fontWeight = "bold";

    /* Create value axis */     
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());    
valueAxis.title.text = "Total Sales ($)";
valueAxis.title.fontWeight = "bold";

    /* Add data */  
var ds = new am4core.DataSource();  
ds.url = window.location.origin+"/home/salesVolumnVersusPeriod"; //Sample of external JSON DATA  = [{"date":"02-2020","FS":6288, 'IO':2342}]  
ds.events.on("done", function(ev) {       
  chart.config = ev.data;    
  var u = ev.data;    var data =
  ev.target.data[0];      var datakey = Object.keys(data);

  var text = '';      
  for (var i = 1; i < datakey.length; i++) {
    addSeries(datakey[i], u);
    text += datakey[i]+' : {'+datakey[i]+'}'+"\n";    
  }

  $('#chartdiv').append('<div id="test">'+text+'</div>');   
});

ds.load();

    /* Create series */     
function addSeries(b, data) {     
// Create series      
    var series = new am4charts.LineSeries();      
    series.data = data;       
    series.dataFields.valueY = b;    
    series.dataFields.categoryX = "date";     
    series.name = b;     
    series.strokeWidth = 3;       
    series.tensionX = 0.7;   
    series.bullets.push(new am4charts.CircleBullet());    
    series = chart.series.push(series);       
    series.events.on("hidden", updateTooltipText);    
    series.events.on("shown", updateTooltipText);
}

function getToolstipItemValue(text) {       
    return `[bold]Date {categoryX}[/]       
    ----        `+text;     
}


    /* Set up tooltip attachment to other series whenever series is hidden */   
function updateTooltipText() {    
    var added = false;   
    tooltipText = $('#test').text();      
    chart.series.each(function(series)
    {
        if (series.visible && !added) {
          series.tooltipText = getToolstipItemValue(tooltipText);

          added = true;
        }
        else {
          series.tooltipText = "";
        }     
    });     
}

/* Add legend */    
chart.legend = new am4charts.Legend();

/* Create a cursor */   
chart.cursor = new am4charts.XYCursor();

Answer 1

終於知道怎么回事了。 它應該使用chart.data 而不是chart.config。 現在圖表工作。 希望這也能幫到你。 干杯!

chart.config = ev.data;