我有一个amChart图表,数据来自它下面的两个表格(代码被修改from this SO answer)。每个表格中的每个类别都以不同的前缀开头:第一个表格以(销售额)开头,第二个表格以(市场)开头。
以下是我的代码:http://jsfiddle.net/uoxbm2d3/2/
由于有两个表,它是一个列/条形图,我需要根据哪个表或它们具有的前缀来堆叠列/条。因此(Sales)将仅与(Sales)堆叠,或者换句话说,表1中的数据将仅与表1堆叠。与(市场)/表2相同,仅与其兄弟姐妹堆叠。像这样:
绿色/黄色/橙色来自表1(销售);蓝/紫色来自表2(市场)。
有没有办法告诉函数哪个图来自哪个表?或者至少告诉函数哪个数据有哪个前缀?
这是一段脚本
function generateGraphsFromData(chart, chartData) {
//get the chart graph value fields as lookup table with a seen property set to false by default
//this will be used to determine what graphs need to be removed when looking at the data
var graphValueFields = chart.graphs.reduce(function(valueFields, graph) {
valueFields[graph.valueField] = 0;
return valueFields;
}, {});
var removeValueFields = [];
//create an array of new graph value fields by filtering out the categoryField
//and the currently known valueFields.
var newGraphValueFields = [];
Object.keys(chartData[0]).filter(function(key) {
return key != chart.categoryField;
}).forEach(function(valueField) {
//if this is a new graph, add it to the list
if (graphValueFields[valueField] === undefined) {
newGraphValueFields.push(valueField);
} else {
//otherwise, set the seen flag to 1
graphValueFields[valueField] = 1;
}
});
//for each new value field left over, create a graph object and add to the chart.
newGraphValueFields.forEach(function(valueField) {
var graph = new AmCharts.AmGraph();
graph.title = valueField;
graph.valueField = valueField;
graph.balloonText = "<strong>[[title]]</strong><br /> Rp[[value]]";
graph.id = valueField; //use the valueField as the ID for ease of removal
graph.type = 'column';
graph.lineAlpha = 0;
graph.fillAlphas = 0.5;
graph.bullet = "none";
graph.stackable = true; // disable stacking
chart.addGraph(graph);
});
//loop through the graphValueFields lookup table and remove all graphs that were not seen when
//rescanning the data
Object.keys(graphValueFields).forEach(function(removeGraphValueField) {
if (graphValueFields[removeGraphValueField] === 0) {
chart.removeGraph(chart.getGraphById(removeGraphValueField));
}
})
}
答案 0 :(得分:1)
添加新图表并删除任何旧图表后,您可以按标题排序然后再次循环查找第一个不匹配的前缀,并将图表的newStack
属性设置为true在其余图表中将其设置为false。例如:
chart.graphs.sort(function(lhs, rhs) {
//sort by title, ensures that the sales (first table) data comes first
var lhsSalesIdx = lhs.title.indexOf('(Sales)');
var rhsSalesIdx = rhs.title.indexOf('(Sales)');
if (lhsSalesIdx !== -1 && rhsSalesIdx === -1) {
return -1;
}
else if (lhsSalesIdx === -1 && rhsSalesIdx !== -1) {
return 1;
}
else {
return lhs.title.localeCompare(rhs.title);
}
});
var stackSet = false;
//find the first instance of the market row graph and set its newStack property to true
//while clearing out the others
for (var i = 0; i < chart.graphs.length; ++i) {
if (!stackSet && chart.graphs[i].title.indexOf('(Sales)') === -1) {
chart.graphs[i].newStack = true;
stackSet = true;
}
else {
chart.graphs[i].newStack = false;
}
}
Updated fiddle - 请注意,我在新的图形循环中将stackable
设置为true,以便它也能正常工作。