AnyChart的動態地圖

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

我有一個問題，應用相同的例如，並繼續給出問題，因爲它dra ws on，即畫出相同的，這是錯誤的。你可以給我一個這個數據的例子來顯示4個不同的圖表嗎？

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

來源

2017-02-07 Diego Loaiza

你應該將代碼粘貼在的問題，也有更具體的瞭解你期望的行爲，並就詳細你得到的錯誤。 – Tophandour

我的問題是，我需要生成4個地圖，在這個例子中我生成了4個地圖，但是一個在另一個上面（疊加），我希望它們是4個地圖，但是正確地檢查了這個例子。 [示例] [1] [1]：http://jsfiddle.net/g4ex62h0/2/ **請參閱下面的答案 –

迭戈，你所需要的 - 就是爲每個圖表獲取適當的數據部分。如果您應用data()方法，您將獲得陣列，因此您可以輕鬆獲取數據，例如與slice()方法：

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

這個簡單的例子描述了一個思路： http://jsfiddle.net/g4ex62h0/4/

來源

2017-02-08 20:04:18

AnyChart的動態地圖

回答

相關問題