Wie Sie label für Google Säulendiagramm Balken

Ich bin mit Google Chart API zu erstellen Diagramm für Werte, die geht von 1 Millionen.

Problem
Die bars, die Vertreter kleinerer Werte (ex: weniger als 50 oder so) sind unsichtbar auf die Grafik und keine Möglichkeit, die ich sehen kann, welche Werte entsprechen einige der x-Achse.

Diese gelöst würden, wenn ich irgendwie kann print y-Achse, Werte auf der Oberseite der Balken.Aber ich konnte nicht finden jede Erwähnung in der API-doc, wie es zu tun.

Gibt es ähnliches problem hier, aber es muss nicht beantwortet meine Frage.

Etiketten auf der Oberseite von inside bar in google interaktives Balkendiagramm

Gibt es einige andere mehr als ein Jahr alte unbeantwortete Fragen hier, ich hoffe, dass jemand vielleicht eine Lösung gefunden haben oder ein workaround durch nun, das ist der Grund, warum diese Frage wieder.

Google Visualisierung: Säulendiagramm, einfache Frage aber die Antwort nicht finden können

So zeigen Sie Werte auf, die die Spitze der Spalten, die Google Chart API

Können Sie mir zeigen, wie Sie das erreichen, was ich will, mit Wie passe ich diese Google-Bar-Chart? ?

InformationsquelleAutor Watt | 2013-06-11
  1. 19

    Check-out Andrew Gallant ist JSFiddle hier:

    http://jsfiddle.net/asgallant/QjQNX/

    Es verwendet einen cleveren hack der combo-Diagramm, um zu erreichen, was ich denke, Sie bist suchen für.

    google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Value');
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRows([
    ['Foo', 53, 'Foo text'],
    ['Bar', 71, 'Bar text'],
    ['Baz', 36, 'Baz text'],
    ['Cad', 42, 'Cad text'],
    ['Qud', 87, 'Qud text'],
    ['Pif', 64, 'Pif text']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 1, 2]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  chart.draw(view, {
    height: 400,
    width: 600,
    series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}
    • +1 Danke für den link. Ich fand eine andere Arbeit, um nur die log-Skala zu zeigen, die y-Achse Werte vAxis:{logScale:true}
    • Gibt es eine Möglichkeit zu machen in verschiedenen Farben zwischen den verschiedenen. zum Beispiel, wenn es zwischen 40 und 80 rot, und wenn 80 oder höher machen es gelb?
    InformationsquelleAutor Jeremy Faller
  2. 4

    Hatte ich einige Rückschläge mit annotation und die unsichtbare Linie (zum Beispiel, dass es im tooltip angezeigt, wie eine andere Serie).

    Ich habe einen hack der ComboChart (konnte mit der Arbeit BarChart und ColumnChart als gut, mit ein paar änderungen) legen Sie die Etiketten in das SVG.

    Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/

    Getestet auf Firefox 21, Chrome 27 und Internet Explorer 9.

    InformationsquelleAutor Augusto Men
Schreibe einen Kommentar