任何CHART动态绘制HeadMaps

时间:2017-02-08 13:43:50

标签: anychart

我需要的是以下内容:

我有问题中显示的数据,我的问题是,我需要生成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();

 }};
 });

此链接是完整的示例。

Example

1 个答案:

答案 0 :(得分:0)

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

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

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