0

我正在使用 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();
4

1 回答 1

0

终于知道哪里不对了。它应该使用chart.data 而不是chart.config。现在图表可以工作了。希望这也可以帮助你。干杯!

chart.config = ev.data;

于 2020-02-11T05:10:59.030 回答