Question

我使用AmCharts显示温度指示。这个数据有多行，所以我在图表中加载了多个dataSet。此外，我需要展示药丸给予时间。此数据集必须在气球文本中显示不同的文本。另外我还有另一个问题：只有第一个数据集显示在类别滚动条中。

我该怎么做？

AmCharts.addInitHandler(function(chart) {

  // check if plugin is enabled
  if (chart.syncDataTimestamps !== true)
    return;

  // go thorugh all data sets and collect all the different timestamps
  var dates = {};
   for (var i = 0; i < chart.dataSets.length; i++) {
    var ds = chart.dataSets[i];
    for (var x = 0; x < ds.dataProvider.length; x++) {
      var date = ds.dataProvider[x][ds.categoryField];
      if (dates[date.getTime()] === undefined)
        dates[date.getTime()] = {};
      dates[date.getTime()][i] = ds.dataProvider[x];
    }
  }

  for (var i = 0; i < chart.dataSets.length; i++) {
    var ds = chart.dataSets[i];
    var dp = [];
    for (var ts in dates) {
      if (!dates.hasOwnProperty(ts))
        continue;
      var row = dates[ts];
      if (row[i] === undefined) {
        row[i] = {};
        var d = new Date();
        d.setTime(ts);
        row[i][ds.categoryField] = d;
      }
      dp.push(row[i]);
    }
    dp.sort(function(a,b){
      return new Date(a[ds.categoryField]) - new Date(b[ds.categoryField]);
    });
    ds.dataProvider = dp;
  }

}, ["stock"]);
var chartData1 = [{  
  date: new Date(2011, 5, 1, 0, 0, 0, 0),
  value: 10
}, {
  date: new Date(2011, 5, 2, 0, 0, 0, 0),
  value: 11
}, {
  date: new Date(2011, 5, 3, 0, 0, 0, 0),
  value: 12
}, {
  date: new Date(2011, 5, 4, 0, 0, 0, 0),
  value: 11
}, {
  date: new Date(2011, 5, 6, 0, 0, 0, 0),
  value: 11
}, ];

var chartData2 = [{
  date: new Date(2011, 5, 8, 0, 0, 0, 0),
  value: 1
}, {
  date: new Date(2011, 5, 9, 0, 0, 0, 0),
  value: 2
}, {
  date: new Date(2011, 5, 10, 0, 0, 0, 0),
  value: 3
}, {
  date: new Date(2011, 5, 11, 0, 0, 0, 0),
  value: 10
}, {
  date: new Date(2011, 5, 12, 0, 0, 0, 0),
  value: 4
}, ];

var chart = AmCharts.makeChart("chartdiv", {
        //*
        "type": "stock",
        "theme": "light",
        "syncDataTimestamps": true,
        "language": "ru",

        dataSets: [
          {
            title: "temperature1",
            fieldMappings: [
              {
                fromField: "value",
                toField: "value"
              }
            ],
            compared: true,
            dataProvider: chartData1,
            categoryField: "date"
          },
          {
            title: "temperature1",
            fieldMappings: [
              {
                fromField: "value",
                toField: "value"
              }
            ],
            compared: true,
            dataProvider: chartData2,
            categoryField: "date"
          }
        ],

        "categoryAxesSettings": {
            "position": "bottom",
            "parseDates": false,
            "dashLength": 1,
            "minorGridEnabled": false,
            "equalSpacing": false,
            "minPeriod": "ss",
            "gridColor": "fff",
            "position": "top",
            "axisColor": "#f591b3"
        },
        "chartScrollbarSettings": {
            "graph": "g1",
            "position": "bottom",
            "oppositeAxis": false,
            "backgroundAlpha": 0,
            "selectedBackgroundAlpha": 0.4,
            "selectedBackgroundColor": "#F592B3",
            "graphFillAlpha": 0,
            "graphLineAlpha": 0.5,
            "selectedGraphFillAlpha": 0,
            "selectedGraphLineAlpha": 1,
            "color": "#AAAAAA"
        },
        panels: [{
            recalculateToPercents: 'never',

            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true,
                compareField: "value",
                compareGraphBullet: 'round',
                compareGraphBulletSize: 3,
                "lineColor": "#F591B3",
                compareGraph: {
                    "color": "#F592B3",
                    "baloonColor": "#F591B3",
                    baloon: {
                        "adjustBorderColor": true,
                        "color": "#fff",
                        "cornerRadius": 5,
                        "fillColor": "#F591B3",
                        "fillAlpha": 1,
                        "borderAlpha": 0,
                        "shadowAlpha": 0,
                        "fontSize": 10,
                    },
                    baloonText: "[[value]]"
                },
            }]
        }]
    });

Answer 1

AmCharts仅支持滚动条内的一个图形对象，这意味着只绘制了第一个dataSet。如果您不希望它与图表有所不同，那么除了从滚动条中删除图表之外，没有解决方法。

对于气球，相关属性称为balloon和balloonText - 在两种情况下，您都拼错了balloon baloon。在compareGraph中设置所需的属性，然后重新设置。您也不需要在第一个compared: true对象中设置dataSet，因为它会在比较图表中复制气球。

Updated fiddle

AmCharts具有多个数据集和不同的气球外观

1 个答案: