任何图表动态绘制头图

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 是完整的例子。

Example

Diego,您所需要的只是为每个图表获取适当的数据部分。如果您将应用 data() 方法,您将获得数组,因此您可以轻松获取数据,例如使用 slice() 方法:

data.data().slice(16*count, 16*(count+1));

这个简单的例子说明了这个想法:http://jsfiddle.net/g4ex62h0/4/