问题
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