从URL加载数据并在Amcharts中绘制另一个图 [英] Load data from URL and plot another graph in Amcharts

问题描述

我使用Amcharts中的股票图表并绘制图形如下：
工作笔

现在，我不想在脚本中输入数据，而是想从URL中加载数据。因此，我不是

 dataSets：[{
 
 
dataProvider：sourceData，
categoryField：time
 $ b $ / code> 

我用



 dataSets：[{
 
dataLoader：{
url：http：// localhost：8080 / contacts？day = 3& zone_id = 3
}，
 
categoryField：time
}] 
  

但它没有用。

1. 如何在此加载数据情景？




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

您使用的迷你插件不支持dataLoader。您可以增加它，但在AJAX回调中创建图表可能更容易。

  $。getJSON（
'path / to / your / endpoint'，
 function（data）{
 AmCharts.makeChart（'chartdiv'，{
 // ... 
 dataSets：[{ 
 dataProvider：data，
 categoryField：time
}]，
 // ... 
}）; 
} 
） ; 
  

默认情况下，插件只接受一个seriesField和一个singleValueField，这意味着您只能显示foo1。您可以对其进行修改，以便使用一系列的seriesValueFields来生成您想要的内容：



  AmCharts.addInitHandler（function（chart） {
 
 //如果没有设置seriesField并且seriesValueField未设置或不是数组，则不执行任何操作
 if（chart.seriesField === undefined&&（chart.seriesValueField === undefined || chart.seriesValueField.length === 0））
 return; 
 
 //获取图形和数据提供者
 var图形，数据集; 
 if（chart.type ===stock）{
 //使用第一个面板
 if（chart.panels [0] .stockGraphs === undefined）
 chart.panels [0 ] .stockGraphs = []; 
图形= chart.panels [0] .stockGraphs; 
 dataSet = chart.dataSets [0]; 
 
 //检查数据集是否有fieldMappings set 
 if（dataSet.fieldMappings === undefined）
 dataSet.fieldMappings = []; 
} else {
 if（chart.graphs === undefined）
 chart.graphs = []; 
图表= chart.gra小灵通; 
 dataSet = chart; 
} 
 
 //为可能已存在的图形收集值字段
 //在图表配置中
 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; 
} 
} 
 
 //过程数据
 var newData = []; 
 var dpoints = {}; 
 for（var i = 0; i< dataSet.dataProvider.length; i ++）{
 //获取行数据
 var row = dataSet.dataProvider [i]; 
 var category = row [dataSet.categoryField]; 
 
 //创建一个数据点
 if（dpoints [category] ​​=== undefined）{
 dpoints [category] ​​= {}; 
 dpoints [category] ​​[dataSet.categoryField] = category; 
 newData.push（dpoints [category]）; 
} 
 
 //为每个seriesField + seriesValueField组合添加点并创建图形
 chart.seriesValueFields.forEach（function（seriesValueField）{
 var series = chart。如果我们需要生成一个图
 if（valueFields [series] === undefined）;如果我们需要生成一个图
 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; 
 
 //添加到图表
图表.push（g）; 
 valueFields [series] = series; 
 
 //将fieldMapping添加到股票图表中设置的数据
 if（chart.type ===stock ）{
 dataSet.fieldMappings.push（{$ b $fromField：series，
 toField：series 
}）; 
 
 
 
 //添加系列值字段
 if（row [seriesValueField]！== undefined）{
 dpoints [category] ​​[series ] = row [seriesValueField]; 
} 
 
}）; 
 //添加值字段的其余部分（如果适用）
（valueFields中的var字段）{
 if（valueFields.hasOwnProperty（field）&& row [field]！ ==未定义）
 dpoints [category] ​​[field] = row [field]; 
} 
} 
 
 //设定数据
 dataSet.dataProvider = newData; 
 
 //函数克隆对象
函数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]; 
} 
返回副本; 
} 
 
}，[serial，stock]）; 
 
 // ... 
 AmCharts.makeChart（chartdiv，{
 // ... 
seriesField：day，
seriesValueFields：[foo1，foo3]，
seriesGraphTemplate：{
lineThickness：2，
type：smoothedLine，
 useDataSetColors：false，
bullet：round
}，
 // ... 
}）; 
  

演示

I am using stock charts in Amcharts and plotting the graph as below: Working Pen

Now Instead of giving the data in the script I wanted to load from a URL.So I instead of

"dataSets": [{


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

I replaced it with

"dataSets": [{

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

        "categoryField": "time"
  }]

But it did not work.

1. How to load data in this scenario?

2. I also want to plot the values of foo3 along with foo1.How can I do that?

Any help is appreciated.

解决方案

The mini-plugin you're using doesn't support the dataLoader. You could augment it, but it's probably easier to just create the chart in your AJAX callback.

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

By default, the plugin only takes a single seriesField and single seriesValueField, meaning you can only display foo1. You can modify it so that it takes an array of seriesValueFields to generate what you want:

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

这篇关于从URL加载数据并在Amcharts中绘制另一个图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！