AmCharts mit multiplen Datensätzen und verschiedenen Balonierscheinungen

Question

Ich verwende AmCharts, um Temperaturanzeigen anzuzeigen. Diese Daten haben mehrere Zeilen, daher lade ich mehrere Datensets im Diagramm. Außerdem muss ich die Pillezeiten angeben. Dieses dataSet muss einen anderen Text in baloon text enthalten. Auch ich habe ein anderes Problem: nur erste dataSet wird in der Kategorie Bildlaufleiste angezeigt.

Wie kann ich es tun?

My code sample

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 unterstützt nur einen Graph Objekt innerhalb der Bildlaufleiste, die gezogen wird, nur das erste dataSet bedeutet. Es gibt keine Problemumgehung dafür außerhalb des Entfernens des Diagramms aus der Bildlaufleiste, wenn es nicht anders als das Diagramm aussehen soll.

Was die Ballons werden die relevanten Eigenschaften balloon und balloonText genannt - Sie balloon als baloon in beiden Fällen falsch geschrieben. Stellen Sie die gewünschten Eigenschaften in compareGraph und Sie sind eingestellt. Sie müssen compared: true in dem ersten dataSet Objekt auch nicht festlegen, da es die Sprechblase in dem verglichenen Diagramm duplizieren wird.

Updated fiddle