Как использовать внешний график данных многолинейного графика - PullRequest
Новая
       76

Как использовать внешний график данных многолинейного графика

0 голосов
/ 10 февраля 2020

Я использую плагин amcharts4 для построения графика многолинейных серий. Но нанесенные точки не располагаются в правильном положении (синяя точка на краю оси Y) enter image description here

Вот выходной график, который я получаю. (пожалуйста, см. прикрепленный выше)

Не уверен, что случилось со следующими кодами. Надеюсь, кто-нибудь может мне помочь. Заранее спасибо! 

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();

1 Ответ

0 голосов
/ 11 февраля 2020

Наконец-то понял, что не так. Он должен использовать chart.data вместо chart.config. Теперь график работает. Надеюсь, это может помочь вам тоже. Ура!

chart.config = ev.data;

...