2016-05-25 9 views
1

Ich habe ein Problem mit Google Charts. Ich möchte ein Kreisdiagramm, das alle Werte mit einer beschrifteten Legende zeigt, einschließlich sehr kleiner Werte, die unter 0,1% liegen.Google-Tortendiagramm: Rundungsproblem mit 2 Dezimalprozenten

sagen, dass ich die folgenden Daten haben:

var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  66], 
     ['Sleep', 33.95], 
     ['Eat', 0.05] 
    ]); 

(Gesamt Spiele bis zu 100)

Das Problem, das jetzt ist, wenn die Prozentsätze zu berechnen, wird Google Charts die Werte gerundet, 33.95 verursacht zu werden 34 und damit 0,05 0.

Beispiel hier immer: https://jsfiddle.net/4qe7h21s/

gibt es eine Möglichkeit, die Charts Motor creat zu lassen e Prozentsätze mit 2 Dezimalstellen anstelle von 1 Dezimalstelle?

Antwort

2

da keine Option Format oder Genauigkeit der Prozentsatz in 'Other'

nächsten, bieten individuelle formatiert Werte

erste, fallen
sliceVisibilityThreshold: 0.0001

so hat 'Eat' nicht festlegen müssen sich ändern in die Daten
{v: 66, f: '66.00%'}

0 setzenund tooltip.text-'value'

da die Scheibe für 'Eat' so klein ist,
tooltip.trigger: 'selection'

siehe folgendes Beispiel verwenden, Scheiben Prozentsatz richtig zeigt

Klick auf Legende Artikel für 'Eat' Tooltip

zu sehen

google.charts.load('current', { 
 
    callback: function() { 
 
    new google.visualization.PieChart(document.getElementById('chart_div')).draw(
 
     google.visualization.arrayToDataTable([ 
 
     ['Task', 'Hours per Day'], 
 
     ['Work', {v: 66, f: '66.00%'}], 
 
     ['Sleep', {v: 33.95, f: '33.95%'}], 
 
     ['Eat', {v: 0.05, f: '0.05%'}] 
 
     ]), 
 
     { 
 
     height: 400, 
 
     legend: { 
 
      position: 'right' 
 
     }, 
 
     pieSliceText: 'value', 
 
     sliceVisibilityThreshold: 0.0001, 
 
     title: 'My Daily Activities', 
 
     tooltip: { 
 
      showColorCode: true, 
 
      text: 'value', 
 
      trigger: 'selection' 
 
     }, 
 
     width: 600 
 
     } 
 
    ); 
 
    }, 
 
    packages: ['corechart', 'table'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

+0

Funktioniert wie ein Charme! Tut genau das, was ich brauchte. Also im Grunde der Trick, um die vordefinierten formatierten Werte zur Verfügung zu stellen. –