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

我试图绘制多个线性图，我使用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();
});

---

提前感谢您的帮助。

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

下面的代码是一个在没有助手的情况下如何克隆对象的示例

/**
 * 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);

/**
*定义克隆对象的函数
*摘自：http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
*/
功能克隆（obj）{
var拷贝；
//处理3个简单类型，以及null或undefined
如果（null==obj | |“object”！=typeof obj）返回obj；
//处理日期
if（obj实例截止日期）{
复制=新日期（）；
copy.setTime（obj.getTime（））；
返回副本；
}
//句柄数组
if（阵列的obj实例）{
拷贝=[]；
对于（变量i=0，len=obj.length；i

---

请检查此示例：

您在使用同一配置对象创建多个图表时是否遇到问题？是的，我希望尽可能多地回收代码，但这似乎很难实现，尝试使用相同的图表配置，但generete遇到了很多问题，这是我让它工作的唯一方法，正在创建多个对象，每个对象都有其图表配置。