任何图表动态绘制头图
ANY CHART dynamic Draw HeadMaps
我需要的是:
我有问题中出现的数据,我的问题是,我需要生成 4 个(头图),如示例中所示,问题是在我的示例中出现了那 4 个(头图),一个在另一个之上,即出现重复。我需要的是生成4个或更多的地图,但不要重复..
我的问题是,我需要生成 4 张地图,在这个例子中我生成了 4 张地图,但是一张在另一张上面(叠加),我希望它们是 4 张地图但是正确的,检查例子
我的代码
anychart.onDocumentReady(function() {
var data = anychart.data.set([
['Preventivo' ,'Monitoreado' ,22 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,16 ,"#298A08"],
['Preventivo' ,'Informal' ,10 ,"#04B431"],
['Preventivo' ,'Nulo' ,4 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,14 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,10 ,"#04B431"],
['Correctivo' ,'Informal' ,6 ,"#FF8000"],
['Correctivo' ,'Nulo' ,2 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,6 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,4 ,"#FF8000"],
['Detectivo' ,'Informal' ,2 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,0 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-2 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-2 ,"#FF0000"],
['Inexistente' ,'Informal' ,-2 ,"#FF0000"],
['Inexistente', 'Nulo' ,-2 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,21 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,15 ,"#04B431"],
['Preventivo' ,'Informal' ,9 ,"#FF8000"],
['Preventivo' ,'Nulo' ,3 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,13 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,9 ,"#FF8000"],
['Correctivo' ,'Informal' ,5 ,"#FF8000"],
['Correctivo' ,'Nulo' ,1 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,5 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,3 ,"#FFFF00"],
['Detectivo' ,'Informal' ,1 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-3 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-3 ,"#FF0000"],
['Inexistente' ,'Informal' ,-3 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-3 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,23 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,17 ,"#298A08"],
['Preventivo' ,'Informal' ,11 ,"#04B431"],
['Preventivo' ,'Nulo' ,5 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,15 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,11 ,"#04B431"],
['Correctivo' ,'Informal' ,7 ,"#FF8000"],
['Correctivo' ,'Nulo' ,3 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,7 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,5 ,"#FF8000"],
['Detectivo' ,'Informal' ,3 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-1 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-1 ,"#FF0000"],
['Inexistente' ,'Informal' ,-1 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-1 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,20 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,14 ,"#04B431"],
['Preventivo' ,'Informal' ,8 ,"#FF8000"],
['Preventivo' ,'Nulo' ,2 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,12 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,8 ,"#FF8000"],
['Correctivo' ,'Informal' ,4 ,"#FF8000"],
['Correctivo' ,'Nulo' ,0 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,4 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,2 ,"#FFFF00"],
['Detectivo' ,'Informal' ,0 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-2 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-4 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-4 ,"#FF0000"],
['Inexistente' ,'Informal' ,-4 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-4 ,"#FF0000"]
]);
stage = anychart.graphics.create("container");
var count = 2;
for (i=0; i<2; i++){
for (j=0; j<2; j++){
var dataSet = data.mapAs({x: [1],y: [0], heat: [2], fill: [3]});
count++;
var chart = anychart.heatMap(dataSet);
chart.container(stage);
chart.bounds(50*i + '%', 50*j + '%', "50%", "50%");
chart.draw();
}};
});
这个 link 是完整的例子。
Diego,您所需要的只是为每个图表获取适当的数据部分。如果您将应用 data() 方法,您将获得数组,因此您可以轻松获取数据,例如使用 slice() 方法:
data.data().slice(16*count, 16*(count+1));
这个简单的例子说明了这个想法:http://jsfiddle.net/g4ex62h0/4/
我需要的是:
我有问题中出现的数据,我的问题是,我需要生成 4 个(头图),如示例中所示,问题是在我的示例中出现了那 4 个(头图),一个在另一个之上,即出现重复。我需要的是生成4个或更多的地图,但不要重复..
我的问题是,我需要生成 4 张地图,在这个例子中我生成了 4 张地图,但是一张在另一张上面(叠加),我希望它们是 4 张地图但是正确的,检查例子
我的代码
anychart.onDocumentReady(function() {
var data = anychart.data.set([
['Preventivo' ,'Monitoreado' ,22 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,16 ,"#298A08"],
['Preventivo' ,'Informal' ,10 ,"#04B431"],
['Preventivo' ,'Nulo' ,4 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,14 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,10 ,"#04B431"],
['Correctivo' ,'Informal' ,6 ,"#FF8000"],
['Correctivo' ,'Nulo' ,2 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,6 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,4 ,"#FF8000"],
['Detectivo' ,'Informal' ,2 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,0 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-2 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-2 ,"#FF0000"],
['Inexistente' ,'Informal' ,-2 ,"#FF0000"],
['Inexistente', 'Nulo' ,-2 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,21 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,15 ,"#04B431"],
['Preventivo' ,'Informal' ,9 ,"#FF8000"],
['Preventivo' ,'Nulo' ,3 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,13 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,9 ,"#FF8000"],
['Correctivo' ,'Informal' ,5 ,"#FF8000"],
['Correctivo' ,'Nulo' ,1 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,5 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,3 ,"#FFFF00"],
['Detectivo' ,'Informal' ,1 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-3 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-3 ,"#FF0000"],
['Inexistente' ,'Informal' ,-3 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-3 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,23 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,17 ,"#298A08"],
['Preventivo' ,'Informal' ,11 ,"#04B431"],
['Preventivo' ,'Nulo' ,5 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,15 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,11 ,"#04B431"],
['Correctivo' ,'Informal' ,7 ,"#FF8000"],
['Correctivo' ,'Nulo' ,3 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,7 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,5 ,"#FF8000"],
['Detectivo' ,'Informal' ,3 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-1 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-1 ,"#FF0000"],
['Inexistente' ,'Informal' ,-1 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-1 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,20 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,14 ,"#04B431"],
['Preventivo' ,'Informal' ,8 ,"#FF8000"],
['Preventivo' ,'Nulo' ,2 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,12 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,8 ,"#FF8000"],
['Correctivo' ,'Informal' ,4 ,"#FF8000"],
['Correctivo' ,'Nulo' ,0 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,4 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,2 ,"#FFFF00"],
['Detectivo' ,'Informal' ,0 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-2 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-4 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-4 ,"#FF0000"],
['Inexistente' ,'Informal' ,-4 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-4 ,"#FF0000"]
]);
stage = anychart.graphics.create("container");
var count = 2;
for (i=0; i<2; i++){
for (j=0; j<2; j++){
var dataSet = data.mapAs({x: [1],y: [0], heat: [2], fill: [3]});
count++;
var chart = anychart.heatMap(dataSet);
chart.container(stage);
chart.bounds(50*i + '%', 50*j + '%', "50%", "50%");
chart.draw();
}};
});
这个 link 是完整的例子。
Diego,您所需要的只是为每个图表获取适当的数据部分。如果您将应用 data() 方法,您将获得数组,因此您可以轻松获取数据,例如使用 slice() 方法:
data.data().slice(16*count, 16*(count+1));
这个简单的例子说明了这个想法:http://jsfiddle.net/g4ex62h0/4/