2014-09-11 2 views
1

j'ai juste besoin de créer une carte thermique élevée graphique ci-dessous:
sample expected highcharttableau Highchart Heatmap pendant des jours dans un mois

Ce que j'ai développé est de définir le nom du mois dans l'axe x et définir chaque jour MOIS en tant que catégorie y, mais le problème est que le graphique élevé va mettre toutes les catégories y dans une position linéaire sur l'axe des y, de façon opposée, j'ai besoin d'être regroupés en 7 jours. Le code que je mis en œuvre jusqu'à présent est comme ci-dessous:

chart: { 
     type: 'heatmap', 
     marginTop: 40, 
     marginBottom: 40 
    }, 


    title: { 
     text: 'Last Six Month' 
    }, 

    xAxis: { 
     categories: ['Mar', 'Apr', 'May', 'June', 'July', 'Aug'], 

    }, 



    colorAxis: { 
     min: 0, 
     minColor: '#FFFFFF', 
     maxColor: Highcharts.getOptions().colors[0] 
    }, 

    legend: { 
     align: 'right', 
     layout: 'vertical', 
     margin: 0, 
     verticalAlign: 'top', 
     y: 25, 
     symbolHeight: 320 
    }, 


    series: [{ 
     name: 'Last Six Month', 
     borderWidth: 1, 
     data: [[0,1,2],[0,2,2],[0,3,2],[0,4,2],[0,5,2],[0,6,2],[0,7,2],[0,8,2],[0,9,2],[0,10,2], [1,1,2],[1,2,2],[1,3,2],[1,4,2],[1,5,2],[1,6,2],[1,7,2],[1,8,2],[1,9,2],[1,10,2]], 
     dataLabels: { 
      enabled: true, 
      color: 'black', 
      style: { 
       textShadow: 'none', 
       HcTextStroke: null 
      } 
     } 
    }] 

Mon état actuel est fixé comme suit: enter image description here Comment puis-je résoudre ce problème et de les classer en semaines du mois?

+1

Pourriez-vous fournir un échantillon de travail de ce que vous avez maintenant? –

+0

S'il vous plaît trouver la deuxième image ci-joint pour mon état actuel – user435245

+0

Pas d'images ... un exemple de code de travail hébergé sur jsfiddle par exemple afin que nous puissions essayer quelques manipulations Merci –

Répondre

2

Si vous voulez utiliser des catégories, puis ajouter quelques-unes vides:

categories: ['Mar', '', '', '', '', 'Apr', '', '', '', '', 'May', '', '', '', '', 'June', '', '', '', '', 'July', ''', '', '', '', Aug'], 

Ou tout simplement utiliser datetime axeX. Remarque: Dans ce cas, vous devez utiliser des valeurs x (horodatages) pour chacun des points.

+2

Je recommanderais certainement d'aller avec un axe datetime. Cela rend la plupart des choses beaucoup plus simples à long terme. – jlbriggs

+0

Je suis tout à fait d'accord - il est aussi plus facile de personnaliser xAxis 'datetime'. –

Questions connexes