Question

我正在尝试绘制多个线性图表，我使用socket.io连接从不同的传感器接收多个数据（MQTT消息）。问题是我无法找到一种方法来重用每个图表的代码，这是我到目前为止所做的：

var socket = io();

var chartData = [];
chart_config = {
  "type": "serial",
  "theme": "light",
  "fontFamily": "sans-serif",
  "fontSize" : "12",
  "valueAxes": [{
    "id": "v1",
    "position": "left"
  }],
  "mouseWheelZoomEnabled": true,
  "graphs": [{
    "id": "g1",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "useLineColorForBulletBorder": true,
    "hideBulletsCount": 50,
    "valueField": "value",
    "balloonText": "[[value]]",
    "balloon":{
      "drop":true
    }
  }],
  "chartCursor": {
   "limitToGraph":"g1"
  },
  "categoryField": "date",
  "categoryAxis": {
    "equalSpacing": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "dataProvider": chartData,
  "export": {
          "enabled": true
  }
};


var chart = AmCharts.makeChart("V1_chart", chart_config);



socket.on('panel1_V', function (data) {
  var newDate = new Date();
  chartData.push({
    date: newDate,
    value: data.message
  });
  console.log('mqtt message: ' + data.message);

  console.log(JSON.stringify(chartData));
  if (chartData.length > 20) {
    chartData.splice(0, chartData.length - 20);
  }
  chart.validateData();
});

提前感谢您的帮助。

Answer 1

您需要对每个图表进行深度克隆配置对象，保持原始图像未使用。

以下代码是如何克隆对象的示例，以防您没有帮助程序来执行此操作。

/**
 * Define function for cloning objects
 * Taken from: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
 */
function clone(obj) {
var copy;

// Handle the 3 simple types, and null or undefined
if (null == obj || "object" != typeof obj) return obj;

// Handle Date
if (obj instanceof Date) {
    copy = new Date();
    copy.setTime(obj.getTime());
    return copy;
}

// Handle Array
if (obj instanceof Array) {
    copy = [];
    for (var i = 0, len = obj.length; i < len; i++) {
    copy[i] = clone(obj[i]);
    }
    return copy;
}

// Handle Object
if (obj instanceof Object) {
    copy = {};
    for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
    }
    return copy;
}

throw new Error("Unable to copy obj! Its type isn't supported.");
}

/**
 * Create first chart
 */

// create a copy of the universal config
var chartConfig1 = clone(chartConfig);

请查看此示例：https://www.amcharts.com/kbase/reusing-the-same-config-object-for-multiple-charts/

使用不同的数据提供者绘制多个图表Amchart

1 个答案: