AnyChart动态地图

Question

这是我的代码：

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

我有一个问题，请应用相同的示例，然后继续给出问题，因为它是基于（即绘制相同的）错误的。 您能寄给我一个包含这些数据的示例，以显示4个不同的图形吗？

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

Answer 1

迭戈，您所需要的-是获取每个图表的适当数据部分。 如果将应用data（）方法，则将获得数组，因此可以轻松获取数据，例如，使用slice（）方法：

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

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