Googleのチャート - 私はその <a href="https://i.stack.imgur.com/ajqZN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ajqZN.png" alt="enter image description here"></a></p> <p>のようなものを持ってしようとしている。しかし一瞬、私は唯一の人あたりのセリエに持っていると私は内部のテキストを表示することができないんだけど内部のテキストとの間隔

Question

とポイントポイント...

私はGoogleの散布図を使用していますが、あなたはこれを達成するための別のツールを知っていれば、私はここよ:)

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>