如何在amcharts中添加多个图形 [英] how to add multiple graphs in amcharts

问题描述

我是amcharts的新手，我正在使用下面的代码在图表中生成两个图形.

I am new to amcharts and I am using the below code to generate two graphs in a chart.

 var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/218423/data1.json"
  },
  "valueAxes": [{
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  }],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [{
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  }],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "country",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 20
  }
});

function setDataSet(dataset_url) {
  AmCharts.loadFile(dataset_url, {}, function(data) {
    chart.dataProvider = AmCharts.parseJSON(data);
    chart.validateData();
  });

所以这很完美，现在我想在图表中添加多个图表，而不是一个图表，但是我不想在需要多少个图表之前定义(无固定大小)，因此如何在amcharts中动态添加图表谢谢您的帮助

So this works perfectly and now instead of one graph I want to add multiple graphs in the chart.But I do not want to Define before how many graphs I need(No fixed size).So how to dynamically add graphs in amcharts?Any help is appreciated

推荐答案

假设您已经预先了解了categoryField，则可以使用dataLoader的 complete 回调查看您新分配的 dataProvider 数组，并根据array对象中的键创建图形.

Assuming you already know the categoryField upfront, you can use dataLoader's complete callback to look at your newly assigned dataProvider array and create graphs based on the keys in the array object.

  "dataLoader": {
    "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-160/SO-41015973.json",
    "complete": function(chart) {
      //get potential valueFields after filtering out the categoryField
      var valueFields = Object.keys(chart.dataProvider[0]).filter(function(value) {
        return value !== chart.categoryField;
      });
      //create the graphs
      valueFields.forEach(function(valueField) {
        chart.graphs.push({
          "valueField": valueField,
          "type": "column",
          "balloonText": "[[category]]: <b>[[value]]</b>",
          "fillAlphas": 0.8,
          "lineAlphas": 0.2
        })
      });
    }
  },

我在您的数据中添加了一个额外的字段，并创建了一个 codepen演示来显示这行得通.

I added an extra field to your data and created a codepen demo to show that this works.

这篇关于如何在amcharts中添加多个图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！