0
私はAmChartsを使用して温度表示を表示しています。このデータには複数の行があるので、複数のdataSetsをグラフに読み込みます。また、私は時間を与える錠剤を表示する必要があります。このデータセットは、バルーンテキストに異なるテキストを表示する必要があります。また、別の問題があります：最初のデータセットだけがカテゴリスクロールバーに表示されます。複数のデータセットと異なるバルーンの外観を持つAmCharts
どうすればいいですか？
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]]"
},
}]
}]
});