AnyChart 动态地图
Posted
技术标签:
【中文标题】AnyChart 动态地图【英文标题】:AnyChart Dynamic Maps 【发布时间】:2017-02-07 20:08:30 【问题描述】:这是我的代码:
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;
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")...;
【问题讨论】:
您应该将代码粘贴到问题中,并更具体地说明您所期望的行为,并详细说明您遇到的错误。 我的问题是,我需要生成 4 个地图,在这个例子中我生成了 4 个地图,但是一个在另一个之上(叠加),我希望它们是 4 个地图但是正确,检查例子。 minimal reproducible example[1] [1]: jsfiddle.net/g4ex62h0/2 **看下面的答案 【参考方案1】:Diego,您所需要的只是为每个图表获取适当的数据部分。如果您将应用 data() 方法,您将获得数组,因此您可以轻松获取数据,例如使用slice() 方法:
data.data().slice(16*count, 16*(count+1));
这个简单的例子说明了这个想法: http://jsfiddle.net/g4ex62h0/4/
【讨论】:
以上是关于AnyChart 动态地图的主要内容,如果未能解决你的问题,请参考以下文章