Question

我们的网站有很多温度指示。还有药丸摄入数据。客户希望使用AmCharts完成。我没有找到正确的例子来制作这个项目。在谷歌搜索后，我找到了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 方法）以插入新的dataSet。在这种情况下，将显示所有数据。但是滚动条存在一些问题：只显示第一个数据集，并且没有解决方案来显示此图表库中带有间隙的所有数据集。

AmCharts具有多个dataSet

1 个答案: