Question

我厌倦了在amchart中测试很多场景，也不好意思选择我我想基于值显示多个对象（每个对象一行）并在日期中显示

我的json文件格式为：

{'OBJNAME': 'SMSC01', 'DATETIME': '20180126 00:00', 'CPUR': 22}, {'OBJNAME': 'SMSC01', 'DATETIME': '20180126 01:00', 'CPUR': 19},{'OBJNAME': 'SMSC02', 'DATETIME': '20180126 00:00', 'CPUR': 27}, {'OBJNAME': 'SMSC02', 'DATETIME': '20180126 01:00', 'CPUR': 45}

我想在图表中提供多个对象，测量项目到目前为止，我厌倦了尝试多种解决方案：

https://www.amcharts.com/kbase/automatically-generate-series-graphs-data-stock-chart/

Answer 1

＆＃13;

/**
 * amCharts plugin: auto-generate data and graphs from series
 * in specific column.
 * Available parameters:
 * seriesField - specifies which column holds series
 * seriesValueField - sepcifies column for series value
 * seriesGraphTemplate - config to use for auto-generated graphs
 */

AmCharts.addInitHandler(function(chart) {

  // do nothing if serisField is not set
  if (chart.seriesField === undefined)
    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];
    var series = row[chart.seriesField];

    // create a data point
    if (dpoints[category] === undefined) {
      dpoints[category] = {};
      dpoints[category][dataSet.categoryField] = category;
      newData.push(dpoints[category]);
    }

    // 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[chart.seriesValueField] !== undefined)
      dpoints[category][series] = row[chart.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"]);

/**
 * Source data
 */
var sourceData = [{
  'OBJNAME': 'SMSC01',
  'DATETIME': '20180126 00:00',
  'CPUR': 22
}, {
  'OBJNAME': 'SMSC01',
  'DATETIME': '20180126 01:00',
  'CPUR': 19
}, {
  'OBJNAME': 'SMSC02',
  'DATETIME': '20180126 00:00',
  'CPUR': 27
}, {
  'OBJNAME': 'SMSC02',
  'DATETIME': '20180126 01:00',
  'CPUR': 45
}];

/**
 * Create the chart
 */
var chart = AmCharts.makeChart("chartdiv", {
  "type": "stock",
  "theme": "light",

  "dataDateFormat": "YYYYMMDD JJ:NN",
  "seriesField": "OBJNAME",
  "seriesValueField": "CPUR",
  "seriesGraphTemplate": {
    "lineThickness": 2,
    "type": "smoothedLine",
    "useDataSetColors": false,
    "bullet": "round"
  },

  "categoryAxesSettings": {
    "minPeriod": "mm"
  },

  "dataSets": [{
    "dataProvider": sourceData,
    "categoryField": "DATETIME"
  }],

  "panels": [{}],

  "chartCursorSettings": {
    "valueBalloonsEnabled": true
  }
});

＆＃13;

#chartdiv {
	width: 100%;
	height: 400px;
}

＆＃13;

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>

＆＃13;

如何在amchart中基于Json文件显示多对象折线图

1 个答案: