2016-04-14 7 views
1

Ich bin völlig neu zu Highcharts und ich machte zwei Arten von ihnen: spline und pie. Sie sehen nun wie folgt aus: enter image description hereProbleme, die Ergebnisse mit Kuchen Highchart

Und: enter image description here

Das Problem ich habe sofort gesehen werden. Da ich zwei Tasten haben, auf denen Benutzer kann bestimmen, wie er seine Karte erscheinen will: enter image description here

mir gelingt Diagrammtyp zu aktualisieren, wie so:

$('#pie').click(function(){ 
      if($('#pie').hasClass('active')!=true){ 
       $('#spline').removeClass('active'); 
       $('#pie').addClass('active'); 
       $('#curve_chart').highcharts().series[0].update({ 
        type: "pie" 
       }); 
      } 
     }); 

Aber ich will nicht, dass dieses pie Diagramm so erscheinen. Ich möchte, wie in spline Art, die Werte jeden Tag darstellen, nicht Notiflow:35 etc. Dies ist Code verantwortlich für Diagramme:

var type=''; 
     $('#spline').click(function(){ 
      if($('#spline').hasClass('active')!=true){ 
       $('#pie').removeClass('active'); 
       $('#spline').addClass('active'); 
       $('#curve_chart').highcharts().series[0].update({ 
        type: "spline" 
       }); 
      } 
     }); 

     $('#pie').click(function(){ 
      if($('#pie').hasClass('active')!=true){ 
       $('#spline').removeClass('active'); 
       $('#pie').addClass('active'); 
       $('#curve_chart').highcharts().series[0].update({ 
        type: "pie" 
       }); 
      } 
     }); 

     $(function() { 
      if($('#spline').hasClass('active')){ 
      type='spline'; 
      }else{ 
      type='pie'; 
     } 
     $('#curve_chart').highcharts({ 
      chart: { 
       type: type 
        }, 
      title: { 
       text: 'Click through rate:' 
       }, 
      xAxis: { 
      categories: [<?php foreach ($percentagePerDay as $key => $value) { 
      if ($value != $last) { 
      echo substr($key, -2); 
      echo ','; 
      } else { 
      echo substr($key, -2); 
      } 
      }?>]//key 
      }, 
     yAxis: { 
      title: { 
      text: 'Percentage' 
      } 
      }, 
     series: [{ 
     name: '<?= $name ?>', 
     data: [<?php foreach ($percentagePerDay as $key => $value) { 
     if ($value != $last) { 
     echo $value; 
     echo ','; 
     } else { 
     echo $value; 
     } 
     }?>]//value 
     }] 
     }); 

     }); 

Ich versuchte pie Diagramm darzustellen hart codierte Werte zu machen, wie so:

$('#pie').click(function(){ 
     if($('#pie').hasClass('active')!=true){ 
      $('#spline').removeClass('active'); 
      $('#pie').addClass('active'); 
      $('#curve_chart').highcharts().series[0].update({ 
       type: "pie" 
       series:[{ 
       data:[['11',35],['12',15],['13',30],['14',20]] 
       }] 
      }); 
     } 
    }); 
      } 
     }); 

Aber pie highchart hat sich nicht geändert. Was muss ich diese Zeile hinzufügen (mit Ausnahme von type):

$('#curve_chart').highcharts().series[0].update({}); 

, um für meine pie Werte wie spline für jeden Tag innerhalb des Bereichs darzustellen ist und diese ‚Scheibe‘ Momente zu entfernen?

UPDATE: Also, das ist, wie ich meine Torte aussehen soll: enter image description here

+2

können Sie eine Geige erstellen bitte? –

+0

Wahrscheinlich werden Sie Schlüssel oder Datenpunkte als Objekt mit benannten Eigenschaften verwenden müssen. Ich verstehe immer noch nicht, wie das Tortendiagramm aussehen sollte - vielleicht könnten Sie ein Bild des erforderlichen Diagramms posten? –

+0

@Kacper Madej Ich habe meine Frage aktualisiert, jetzt können Sie sehen, wie mein Kuchen aussehen soll – Ognj3n

Antwort

0

Wenn Serie Aktualisierung o nicht-Serie in-Objekt übergibt - nur Serie Eigenschaften, wie Name, Typ, Daten etc. Um dataLabels wie im Bild zu haben, müssen Sie nur Namen für Punkte setzen, Highcharts wird es funktionieren lassen.

Beispiel: http://jsfiddle.net/tvd6faf9/