Google Chart - Punkte mit Text nach innen und Intervall

Question

Ich versuche, etwas zu haben, wie die

Aber im Moment habe ich nur auf serie pro Person und ich bin nicht in der Lage, den Text innerhalb des Menüs Punkt ...

ich bin mit einem Google-Scatter-Diagramm, aber wenn Sie ein anderes Werkzeug wissen dies zu erreichen, ich bin hier :)

var data = new google.visualization.DataTable(); 

    data.addColumn('string', 'Element'); 
    data.addColumn('number', 'Left'); 
    data.addColumn({type: 'number', role: 'interval'}); 
    data.addColumn({type: 'number', role: 'interval'}); 
    data.addColumn('number', 'Right'); 
    data.addColumn({type: 'number', role: 'interval'}); 
    data.addColumn({type: 'number', role: 'interval'}); 

    for(var i=0; i < dataToInsert.length; i++){ 
      data.addRow([ 
       dataToInsert[i].name, 
       dataToInsert[i].L.mean, 
       dataToInsert[i].L.min, 
       dataToInsert[i].L.max, 
       dataToInsert[i].R.mean, 
       dataToInsert[i].R.min, 
       dataToInsert[i].R.max 
      ]); 
    } 

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

    var options = { 
     pointSize: 30, 
     legend: 'none', 
     orientation: 'horizontal', 
     vAxis: { 
      minValue: -1.0, 
      ticks: [-1.0, -0.8, -0.6, -0.4, -0.2, 0.0, 0.2, 0.4, 0.6, 0.8, 1.0] 
     }, 
    }; 

    var chart = new google.visualization.ScatterChart(document.getElementById('chart')); 
    chart.draw(data, options); 

Answer 1

können Sie eine Anmerkung Spalte angezeigt Text innerhalb des

Punkt verwenden

die folgenden Optionen festlegen, um den Schaft zu entfernen und den Text nach unten bewegen
Sie auch den Textstil

annotations: { 
    stem: { 
    color: 'transparent', 
    length: -6 
    }, 
    textStyle: { 
    auraColor: '#ffffff', 
    color: '#000000' 
    } 
}, 

folgende sehen ändern Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 

 
    data.addColumn('string', 'Element'); 
 
    data.addColumn('number', 'Left'); 
 
    data.addColumn({type: 'string', role: 'annotation'}); 
 
    data.addColumn({type: 'number', role: 'interval'}); 
 
    data.addColumn({type: 'number', role: 'interval'}); 
 
    data.addColumn('number', 'Right'); 
 
    data.addColumn({type: 'number', role: 'interval'}); 
 
    data.addColumn({type: 'number', role: 'interval'}); 
 

 
    data.addRows([ 
 
     ['Person A', -.2, 'L', -.6, .2, -.2, -.6, .2], 
 
     ['Person B', -.2, 'R', -.6, .2, -.2, -.6, .2] 
 
    ]); 
 

 
    var options = { 
 
     annotations: { 
 
     stem: { 
 
      color: 'transparent', 
 
      length: -6 
 
     }, 
 
     textStyle: { 
 
      auraColor: '#ffffff', 
 
      color: '#000000' 
 
     } 
 
     }, 
 
     pointSize: 30, 
 
     legend: 'none', 
 
     orientation: 'horizontal', 
 
     vAxis: { 
 
     minValue: -1.0, 
 
     ticks: [-1.0, -0.8, -0.6, -0.4, -0.2, 0.0, 0.2, 0.4, 0.6, 0.8, 1.0] 
 
     }, 
 
    }; 
 

 
    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>