谷歌圖 - 點與文本內間隔

Question

我想有這樣的事情

但是現在我只有每個人意甲，我不能夠顯示裏面的文本點...

我使用的是谷歌散點圖但如果你知道另一種工具來實現這一點，我在這裏很:)

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

你可以使用註解列點

設置下列選項中顯示的文本，以去除莖和移動文本向下
你也可以改變文本樣式

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

看到以下工作片段...

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>