具有多个数据集的 AmCharts

Question

我们的网站有很多温度指示。还有药丸摄入数据。客户希望使用 AmCharts 来完成。我还没有找到正确的例子来制作这个项目。在 google 中搜索后，我找到了 this code example，这解释了类似的。

var chartData = [];
var chartData2 = [];

generateChartData();

function generateChartData() {
  var firstDate = new Date();
  firstDate.setDate( firstDate.getDate() - 500 );
  firstDate.setHours( 0, 0, 0, 0 );

  for ( var i = 0; i < 500; i++ ) {
    var newDate = new Date( firstDate );
    newDate.setDate( newDate.getDate() + i );

    var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;

    chartData.push( {
      date: newDate,
      value1: a1
    } );

   if (a1%2 != 0)
   {
      chartData2.push( {
        date: newDate,
        value2: a1
      });
  }
 }
}

var chart = AmCharts.makeChart( "chartdiv", {
  type: "stock",
  "theme": "light",

  "dataSets": [ 
  {
    "fieldMappings": [ {
      "fromField": "value1",
      "toField": "value1"
    }
    ],
    "dataProvider": chartData,
    "categoryField": "date",
    "compared" : true
  },

  {
    "fieldMappings": [ {
    "fromField": "value2",
    "toField": "value2"
  }
],
    "dataProvider": chartData2,
    "categoryField": "date",
    "compared": true
  }
],


 "panels": [ {
   recalculateToPercents:"never",

   "valueAxes" : [
     {"id":"axis1"},
     {"id":"axis2"}
   ],

   "stockGraphs": [ 
   {
     "id": "g1",
     "title": "Graph #1",
     "lineThickness": 2,
     "valueField": "value1",
     "useDataSetColors": false,
     "valueAxis" : "axis1",
   }, 

  {
    "id": "g2",
    "title": "Graph #2",
    "lineThickness": 5,
    "valueField": "value2",
    "useDataSetColors": false,
    "connect" : false,
    "valueAxis" : "axis2",
    "comparable": true,
    "compareField": "value2"
  }]
 }],

 "chartScrollbarSettings": {
    "graph": "g1"
 },

 "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  },

  "periodSelector": {
     "position": "bottom",
     "periods": [ {
     "period": "MM",
     "selected": true,
     "count": 1,
     "label": "1 month"
   }, {
     "period": "YYYY",
     "count": 1,
     "label": "1 year"
   }, {
     "period": "YTD",
     "label": "YTD"
   }, {
     "period": "MAX",
     "label": "MAX"
   } ]
 }
});

但它对我不可用的原因是，当服用药片的时间段不在温度指示数据设置的时间段内时。在 AmChart 中我们必须选择主数据集，所以如果我们在第二个（非主）数据集中添加日期大于主数据集周期的新项目，它甚至不可见。

希望你能帮助我解决这个问题，经过大量时间寻找解决方案，我什至没有接近正确的解决方案。

Answer 1

解决方案是添加特殊的 plugin code（initHandler 方法）用于插入新数据集。在这种情况下，将显示所有数据。但是滚动条有一些问题：只显示第一个数据集，这个图表库没有显示所有有间隙的数据集的解决方案。

具有多个数据集的 AmCharts

AmCharts with multiple dataSet

javascript

amcharts