Kreisdiagramm: Bild in Segment laden und

klicken

Ich habe versucht, ein Kreisdiagramm zu erstellen. Ich sah, dass es viele verschiedene Bibliotheken gab und ich habe Chart.js ausprobiert, da es einer der bevorzugten zu sein scheint. Ich bin nicht entschlossen, diese Bibliothek weiter zu benutzen, also bin ich offen für jede andere Lösung meines Problems.Kreisdiagramm: Bild in Segment laden und

Ich habe zwei Hauptprobleme:

ein Bild zu einem Abschnitt Laden.
Die Segmente klickbar machen, so dass ein Div entsprechend dem ausgewählten Abschnitt angezeigt wird.

Das ist mein HTML

<body> 
    <canvas id="mycanvas"></canvas> 
</body>

Das ist mein JS

<script> 
    $(document).ready(function(){ 
     var ctx = $("#mycanvas").get(0).getContext("2d"); 

     var data = [ 
      { 
       value: 51, 
       color: "cornflowerblue", 
       highlight: "lightskyblue", 
       label: "Corn Flower Blue"   
      }, 
      { 
       value: 51, 
       color: "lightgreen", 
       highlight: "yellowgreen", 
       label: "Lightgreen" 
      }, 
      { 
       value: 51, 
       color: "orange", 
       highlight: "darkorange", 
       label: "Orange" 
      }, 
      { 
       value: 51, 
       color: "beige", 
       highlight: "bisque", 
       label: "Beige" 
      }, 
      { 
       value: 51, 
       color: "aliceblue", 
       highlight: "cadetblue", 
       label: "AliceBlue" 
      }, 
      { 
       value: 51, 
       color: "brown", 
       highlight: "chocolate", 
       label: "Brown" 
      }, 
      { 
       value: 51, 
       color: "darkviolet", 
       highlight: "deeppink", 
       label: "DarkViolet" 
      } 
     ]; 

     var piechart = new Chart(ctx).Pie(data); 

    }); 
</script>

Gibt es eine Möglichkeit kann ich nur einen Background jedes Segment geben? Wie durch jeden von ihnen gehen und das Attribut hinzufügen, während auch ein Klickereignis zugewiesen wird?

Vielen Dank.

Quelle

2016-03-30 RaDi

Wenn Sie für kommerzielle Diagrammbibliotheken offen sind, können Sie ChartDirector in Betracht ziehen. Es kann Bilder in Sektionslabels laden und die Labels können auf die Sektionen gelegt werden. Es kann auch Bilder als "Hintergrund" verwenden, um die Abschnitte zu füllen. Die Abschnitte können auch auf Mausereignisse (wie Mausklick) reagieren. Einige Beispielbilder sind:

DynaPDF läuft auf der Server-Seite und unterstützt mehrere Programmiersprachen. Als Referenz finden Sie den Code für den oben genannten Diagrammen in der ASP.NET-Framework in C#/VB sind bei:

VB/C# Icon Pie Chart

VB/C# Texture Donut Chart

Quelle

2016-03-31 09:05:15 user3100235

Thank you! Ich kann leider keine kommerzielle Charting-Bibliothek verwenden, aber es ist gut zu wissen, dass es so etwas gibt, ich werde es wahrscheinlich in Zukunft verwenden. Ich entschied mich dafür, es in Photoshop zu machen und eine Imagemap darauf zu verwenden. Es war die schnellste und einfachste Lösung, die ich finden konnte, aber jetzt muss ich eine Möglichkeit finden, die Image-Map während der Verwendung von Foundation ansprechend zu gestalten. – RaDi

Kreisdiagramm: Bild in Segment laden und

Antwort

Verwandte Themen