2013-08-01 4 views
0

J'essaie de générer un graphique multi-axes en utilisant le diagramme ci-dessous. Mais ce ne fonctionne pas, la génération de tableau et tout va très bien.Problème de haut diagramme avec plusieurs axes avec données dynamiques

Si j'ai le code totalNoOfLabels et totalLabelsSize puis son fonctionnement. S'il vous plaît suggèrent:

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

$(function() { 
var result=[{"date":"2013-05-01","propertiesList": {"labelsCount":"14","totalSize":"62.62"}},{"date":"2013-05-04","propertiesList":{"labelsCount":"4","totalSize":"22.43"}},{"date":"2013-05-03","propertiesList":{"labelsCount":"7","totalSize":"34.09"}},{"date":"2013-05-02","propertiesList":{"labelsCount":"13","totalSize":"67.51"}},{"date":"2013-05-05","propertiesList":{"labelsCount":"3","totalSize":"11.65"}}]; 

var totalNoOfLabels=[]; 
var totalLabelsSize=[]; 
var dates=[]; 

dailyStatList = JSON.stringify(result);    
      var statsObj = $.parseJSON(dailyStatList); 
      $.each(statsObj, function() { 
       dates.push(this.date); 
        totalNoOfLabels.push(this.propertiesList.labelsCount); 
       totalLabelsSize.push(this.propertiesList.totalSize); 
      }); 

    $('#container').highcharts({ 
     chart: { 
      zoomType: 'xy' 
     }, 
     title: { 
      text: 'Info' 
     }, 

     xAxis: [{ 
      categories: dates 
     }], 
     yAxis: [{ // Primary yAxis 
      labels: { 

       style: { 
        color: '#89A54E' 
       } 
      }, 
      title: { 
       text: 'No of labels', 
       style: { 
        color: '#89A54E' 
       } 
      } 
     }, { // Secondary yAxis 
      title: { 
       text: 'Size ', 
       style: { 
        color: '#4572A7' 
       } 
      }, 
      labels: { 

       style: { 
        color: '#4572A7' 
       } 
      }, 
      opposite: true 
     }], 
     tooltip: { 
      shared: true 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'left', 
      x: 120, 
      verticalAlign: 'top', 
      y: 100, 
      floating: true, 
      backgroundColor: '#FFFFFF' 
     }, 
     series: [{ 
      name: 'Labels', 
      color: '#4572A7', 
      type: 'column', 
      yAxis: 1, 
      data: totalNoOfLabels 


     }, { 
      name: 'Size', 
      color: '#89A54E', 
      type: 'spline', 
      data: totalLabelsSize 

     }] 
    }); 
    }); 

Répondre

0

labelsCount et totalSize doivent être des nombres, et non des chaînes. Analyser ces valeurs, ou mettre en JSON sous forme de nombres et fonctionnera correctement.

Questions connexes