AnyChart Dynamic Maps

生来就可爱ヽ(ⅴ<●) 提交于 2020-01-06 18:14:06

问题


This is my code:

HTML:

<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />
<div id="container"></div>

CSS:

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

Javascript:

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();
        }
    };
});

I have a problem, apply the same example, and continue giving problems, because it draws on, ie draws the same, which is wrong. Could you send me an example with this data to show 4 different graphs?

stage = anychart.graphics.create("container")...;

回答1:


Diego, all you need - is to get the appropriate part of data for each chart. If you'll apply the data() method, you'll get the array, so you can easily get the data, e.g. with the slice() method:

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

This simple example illustrates the idea: http://jsfiddle.net/g4ex62h0/4/



来源:https://stackoverflow.com/questions/42099009/anychart-dynamic-maps

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!