ダイナミックなコードチャートヘッドマップのリスクマトリックス

Question

このコードでは、動的に（var 1、var 2、var 3などを使用せずに）地図を作成したいと思います。ここで

   var heatMaRiesgoInherente = dataSetRiesgoInherente.mapAs({ x: [4], y: [3], value: [0], heat: [0], fill: [1] }); 
       // Crea el stage con el elemento container 
       var stage = acgraph.create("container"); 
       // helper function to setup same settings for all six charts 
       var setupChartSettings = function (chart) { 
        chart.container(stage); 
        chart.padding([1, 10, 5, 10]).margin(0); 
        //chart.interactivity().selectionMode("none"); 
        //Activo texto en los vectores 
        chart.xAxis(true); 
        //Color de Borde 
        chart.stroke("#D8D8D8"); 
        //D8D8D8 
        //E6E6E6 
        chart.xAxis().staggerMode(false); 
        //Texto en el vector Y 
        chart.yAxis().stroke('#4195EE').ticks().enabled(false); 
        //Texto en el vector X 
        // Quita los labels dentro de las cajas de texto 
        //chart.labelsDisplayMode('drop'); 
        chart.labels().enabled(false); 
        // Aca habilito los Tooltip 
        chart.tooltip(true); 
        chart.tooltip().title().useHtml(true); 
         // Creates el mapa para el Riesgo Inherente 
       var menChart = anychart.heatMap(heatMaRiesgoInherente); 
       //Titulo 
       menChart.title().text('Mapa de Calor de Riesgo Inherente'); 
       //Tamaños de los cuadros 
       menChart.bounds(0, 0, "100%", "50%"); 
       //Asigna la configuracion 
       setupChartSettings(menChart); 
       menChart.draw(); 

Answer 1

あなたは1 data setからいくつかのヒートマップチャートを作成する方法を見つけることができます。

var data = anychart.data.set([ 
    ["Quarter 1", 'Mobile', 23, 28], 
    ["Quarter 2", 'Mobile', 21, 26], 
    ["Quarter 1", 'Desktop', 19, 26], 
    ["Quarter 2", 'Desktop', 21, 27], 
    ["Quarter 1", 'WebMail', 22, 28], 
    ["Quarter 2", 'WebMail', 25, 27] 
    ]); 

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

var dataSet = data.mapAs({ 
    x: [0], 
    y: [1], 
    heat: [2] 
}); 

var heatmap_1 = anychart.heatMap(dataSet); 

    heatmap_1.container(stage); 
    heatmap_1.bounds(0, 0, "100%", "50%"); 

heatmap_1.draw(); 

var dataSet = data.mapAs({ 
    x: [0], 
    y: [1], 
    heat: [3] 
}); 

var heatmap_2 = anychart.heatMap(dataSet); 
    heatmap_2.container(stage); 
    heatmap_2.bounds(0, "50%", "100%", "50%"); 
    heatmap_2.draw(); 
}); 

http://jsfiddle.net/anycharts/g4ex62h0/

この例では、あなたがあなたのように、ヒートマップ行列を作成する方法を示しこの方法を使用するか、またはそれを変更することで、ヒートマップの必要な量を作成することができます。ポイントの説明のために、ループを最適化するだけです。 http://jsfiddle.net/anycharts/txkkdwmx/

これは、パラメータを渡してヒートマップを作成できるというアイデアを示しています。ループでは、それが十分でない前に。また、巨大なデータセットを最初に定義し、それを各チャートごとにマップすることもできます。

希望すると便利です。

Answer 2

あなたは簡単のように、ループ内の1つのデータセットから複数のグラフを作成することができます。必要なのは

  var dataSet = data.mapAs({ 
      x: [0], 
      y: [1], 
      heat: [count] 
      }); 
      count++; 
      var chart = anychart.heatMap(dataSet); 
      chart.container(stage); 

- 適切な方法でデータをマッピングすることです。この例を見てください、それはポイントを示しています：http://jsfiddle.net/g4ex62h0/1/

これは役に立ちます！