Google 图表 - 内部带有文本和间隔的点

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>

Google 图表 - 内部带有文本和间隔的点

Google Chart - Points with text inside and interval

javascript

graph

charts

google-visualization

scatter