无法向 amchart 股票图表添加 2 个以上图表
2017-11-21
140
我试图向股票图表添加 3 个图表,在单独的面板中显示来自不同数据集的数据。
这是 JS 代码:
var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
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;
var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
var a3 = -1 * Math.round(Math.random() * (1000 + i)) + 2000 + i;
chartData1.push({
date: newDate,
value: a1
});
chartData2.push({
date: newDate,
value: a2
});
chartData3.push({
date: newDate,
value: a3
});
}
}
AmCharts.makeChart("chartdiv", {
type: "stock",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}],
dataProvider: chartData1,
categoryField: "date"
},
{
title: "second data set",
fieldMappings: [{
fromField: "value",
toField: "value2"
}],
dataProvider: chartData2,
categoryField: "date"
},
{
title: "third data set",
fieldMappings: [{
fromField: "value",
toField: "value3"
}],
dataProvider: chartData3,
categoryField: "date",
compared: true
}
],
panels: [{
showCategoryAxis: false,
title: "Data set #1",
recalculateToPercents: "never",
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
bullet: "round"
}],
stockLegend: {
}
},{
showCategoryAxis: false,
title: "Data set #2",
recalculateToPercents: "never",
stockGraphs: [{
id: "g2",
valueField: "value2",
comparable: true,
bullet: "round"
}],
stockLegend: {
}
}, {
showCategoryAxis: true,
title: "Data set #3",
recalculateToPercents: "never",
stockGraphs: [{
id: "g3",
valueField: "value3",
compareField: "value3",
comparable: true,
bullet: "round",
visibleInLegend: false
}],
stockLegend: {
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
periodSelector: {
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"
}]
}
});
这是 演示 的链接。它只显示两个图表,第三个没有渲染。
1个回答
如果您希望默认显示所有数据集,则需要在第一个数据集之后的所有数据集中将
compared
设置为 true。您只能在第三个数据集中设置它,而第二个数据集中无需设置。
{
title: "second data set",
fieldMappings: [
{
fromField: "value",
toField: "value2"
}
],
dataProvider: chartData2,
categoryField: "date",
compared: true //needs to be enabled
},
{
title: "third data set",
fieldMappings: [
{
fromField: "value",
toField: "value3"
}
],
dataProvider: chartData3,
categoryField: "date",
compared: true //needs to be enabled
xorspark
2017-11-21