2017-10-12 1 views
2

Wie ist es möglich, die Zahlenwerte in einem Google-Balkendiagramm mit Dual-X-Achsen zu formatieren? Die oberen Achsen mit der Label-Unterstützung sollten mindestens vier Dezimalstellen haben, wie der im Tooltip angezeigte Wert.Formatnummern in Google Balkendiagramm mit Dual-X-Achsen (Dezimal)

Was ich versucht habe ist this Ansatz, aber es scheint nicht zu funktionieren.

Mein Code:

data.addColumn('string', 'RuleName'); 
     data.addColumn('number', 'Lift'); 
     data.addColumn('number', 'Support'); 


     for (var i = 0; i < chartsdata.length; i++) { 
      data.addRow([rule, Lift,Support)]); 
     } 

     // format numbers in second column to 5 decimals 
     var formatter = new google.visualization.NumberFormat({ 
      pattern: '#,##0.00000' 
     }); // This does work, but only for the value in the tooltip. 

     formatter.format(data, 2); 

     // Passing in some options  
     var chart = new google.charts.Bar(document.getElementById('barChart')); 
     var options = { 

      title: "Association Rules by lift and support", 
      bars: 'horizontal', 
      series: { 
       0: { axis: 'Lift', targetAxisIndex: 0, }, 
       1: { axis: 'Support', targetAxisIndex: 1} 

      }, 

      axes: { 
       x: { 
        Lift: { label: 'Lift', format: '0,000' //Doesn't work, }, // Bottom x-axis. 
        Support: { side: 'top', label: 'Support' } // Top x-axis. 
       } 
      }, .......... 

Was ich auch versucht, dieser Ansatz von der doc google:

series:{hAxes:{1:{title:'abc', format: '0,0000'}} 

The top axes with the label support should have at least four decimal places

Jede Hilfe wäre sehr dankbar!

Antwort

1

es mehrere Optionen, die von Werkstoff Charts werden nicht unterstützt
siehe ->Tracking Issue for Material Chart Feature Parity

obwohl format nicht aufgeführt ist, gibt es mehrere Optionen nicht unterstützt ->{hAxis,vAxis,hAxes.*,vAxes.*}

so das könnte das problem sein
hinweis: die obigen optionen sollten alleine stehen und nicht in der series option,
enthalten sein, wie in der frage gesehen (Was ich auch versucht ...)

Sie beiden x-Achsen-Formate ändern können durch hAxis.format
verwenden, aber glaube nicht, Sie in der Lage sein werden nur ein

siehe folgenden Arbeits Schnipsel zu ändern ...

google.charts.load('current', { 
 
    packages: ['bar'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'RuleName'); 
 
    data.addColumn('number', 'Lift'); 
 
    data.addColumn('number', 'Support'); 
 
    for (var i = 0; i < 10; i++) { 
 
    data.addRow([i.toString(), i+2, i+3]); 
 
    } 
 

 
    var formatter = new google.visualization.NumberFormat({ 
 
    pattern: '#,##0.00000' 
 
    }); 
 
    formatter.format(data, 2); 
 

 
    var chart = new google.charts.Bar(document.getElementById('barChart')); 
 
    var options = { 
 
    chart: { 
 
     title: 'Association Rules by lift and support' 
 
    }, 
 
    bars: 'horizontal', 
 
    series: { 
 
     0: {axis: 'Lift'}, 
 
     1: {axis: 'Support'} 
 
    }, 
 
    axes: { 
 
     x: { 
 
     Lift: {label: 'Lift'}, 
 
     Support: {side: 'top', label: 'Support'} 
 
     } 
 
    }, 
 
    hAxis: { 
 
     format: '#,##0.00000' 
 
    }, 
 
    height: 320 
 
    }; 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="barChart"></div>

+1

hoffen, dass diese mit _Material_ hilft, sollten Sie 'convertOptions' verwenden vor dem zeichnen ... – WhiteHat

+0

Das hilft definitiv! Ich habe versucht, die 'hAxis: { Format: '#, ## 0,00000' } Option, aber wusste nicht über' ConvertOptions'. Dies löste mein Problem, indem ich beide Achsen formatierte. – Chris

Verwandte Themen