javascript - 从 URL 加载数据并在 Amcharts 中绘制另一个图表

Question

我正在 Amcharts 中使用股票图表并绘制如下图: Working Pen

现在我不想在脚本中提供数据，而是想从 URL 加载。所以我而不是

"dataSets": [{


        "dataProvider": sourceData,
        "categoryField": "time"
  }]

我把它替换为

"dataSets": [{

      "dataLoader": {
           "url": "http://localhost:8080/contacts?day=3&zone_id=3"
         },

        "categoryField": "time"
  }]

但是没有成功。

1. 这种情况下如何加载数据？

2. 我还想绘制 foo3 和 foo1 的值。我该怎么做？

感谢任何帮助。

Answer 1

您使用的迷你插件不支持 dataLoader。您可以对其进行扩充，但在 AJAX 回调中创建图表可能更容易。

$.getJSON(
  'path/to/your/endpoint', 
  function(data) {
    AmCharts.makeChart('chartdiv', {
      // ...
      dataSets: [{
        dataProvider: data,
        categoryField: "time"
      }],
      // ...
    });
  }
);

默认情况下，该插件仅采用单个seriesField和单个seriesValueField，这意味着您只能显示foo1。您可以修改它，以便它需要一个 seriesValueFields 数组来生成您想要的内容:

AmCharts.addInitHandler(function(chart) {

  // do nothing if seriesField is not set and seriesValueField isn't set or is not an array
  if (chart.seriesField === undefined && (chart.seriesValueField === undefined || chart.seriesValueField.length === 0))
    return;

  // get graphs and dataProvider
  var graphs, dataSet;
  if (chart.type === "stock") {
    // use first panel
    if (chart.panels[0].stockGraphs === undefined)
      chart.panels[0].stockGraphs = [];
    graphs = chart.panels[0].stockGraphs;
    dataSet = chart.dataSets[0];

    // check if data set has fieldMappings set
    if (dataSet.fieldMappings === undefined)
      dataSet.fieldMappings = [];
  } else {
    if (chart.graphs === undefined)
      chart.graphs = [];
    graphs = chart.graphs;
    dataSet = chart;
  }

  // collect value fields for graphs that might already exist
  // in chart config
  var valueFields = {};
  if (graphs.length) {
    for (var i = 0; i < graphs.length; i++) {
      var g = graphs[i];
      if (g.id === undefined)
        g.id = i;
      valueFields[g.id] = g.valueField;
    }
  }

  // process data
  var newData = [];
  var dpoints = {};
  for (var i = 0; i < dataSet.dataProvider.length; i++) {
    // get row data
    var row = dataSet.dataProvider[i];
    var category = row[dataSet.categoryField];

    // create a data point
    if (dpoints[category] === undefined) {
      dpoints[category] = {};
      dpoints[category][dataSet.categoryField] = category;
      newData.push(dpoints[category]);
    }

    //add points and create graphs for each seriesField + seriesValueField combination
    chart.seriesValueFields.forEach(function(seriesValueField) {
      var series = chart.seriesField + ' ' + row[chart.seriesField] + ' ' + seriesValueField;

      // check if we need to generate a graph
      if (valueFields[series] === undefined) {
        // apply template
        var g = {};
        if (chart.seriesGraphTemplate !== undefined) {
          g = cloneObject(chart.seriesGraphTemplate);
        }
        g.id = series;
        g.valueField = series;
        g.title = series;

        // add to chart's graphs
        graphs.push(g);
        valueFields[series] = series;

        // add fieldMapping to data set on Stock Chart
        if (chart.type === "stock") {
          dataSet.fieldMappings.push({
            "fromField": series,
            "toField": series
          });
        }
      }

      // add series value field
      if (row[seriesValueField] !== undefined) {
        dpoints[category][series] = row[seriesValueField];
      }

    });
    // add the rest of the value fields (if applicable)
    for (var field in valueFields) {
      if (valueFields.hasOwnProperty(field) && row[field] !== undefined)
        dpoints[category][field] = row[field];
    }
  }

  // set data
  dataSet.dataProvider = newData;

  // function which clones object
  function cloneObject(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
  }

}, ["serial", "stock"]);

// ...
AmCharts.makeChart("chartdiv", {
  // ...
  "seriesField": "day",
  "seriesValueFields": ["foo1", "foo3"],
  "seriesGraphTemplate": {
    "lineThickness": 2,
    "type": "smoothedLine",
    "useDataSetColors": false,
    "bullet": "round"
  },
  // ...
});

Demo