複数のデータセットを持つ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

解決策は、新しいdataSetsを挿入するために特別なplugin code（のinitHandlerメソッド）を追加することです。この場合、すべてのデータが表示されます。しかし、スクロールバーにはいくつかの問題があります。最初のdataSetだけが表示され、このチャートライブラリにギャップがあるすべてのdataSetを表示するソリューションはありません。