javascript - 谷歌图表 : Plotting mutiple "Y" values on same "X" value

Question

我正在使用 Google Charts 的散点图。

这是我目前拥有的:

我正在根据命名实体绘制值(在 X 轴上)。实体可以有多个蓝色/红色值。引用上面的屏幕截图，我希望蓝点绘制在 A1 上方，而不是重复 A1。

这能做到吗？这是我的代码:

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
          
        

          // Create the data table.
          var data = new google.visualization.DataTable();
        
          data.addColumn('string', 'Name');
          data.addColumn('number', 'Blue Value');
          data.addColumn('number', 'Red Value');
          data.addRows([
            ['A1', 3500, 4500],
            ['A1', 4000, null],
            ['A2', 3700, 4100],
            ['A3', 3110, 4200],
            ['A4', 3600, 4300]
          ]);

          // Set chart options
          var options = {'title':'My Title',
              'width':800,
              'height':500};

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
          chart.draw(data, options);
      }

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


<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 1

默认情况下，离散轴(字符串值)将显示所有 x 轴值，
即使他们重复

要获得所需的图表，您可以使用连续轴(数值)，
并使用对象表示法来格式化值和轴标签(ticks)

对象表示法允许您同时提供值 (v:) 和格式化值 (f:)

{v: 1, f: 'A1'}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Name');
  data.addColumn('number', 'Blue Value');
  data.addColumn('number', 'Red Value');
  data.addRows([
    [{v: 1, f: 'A1'}, 3500, 4500],
    [{v: 1, f: 'A1'}, 4000, null],
    [{v: 2, f: 'A2'}, 3700, 4100],
    [{v: 3, f: 'A3'}, 3110, 4200],
    [{v: 4, f: 'A4'}, 3600, 4300]
  ]);

  var options = {
    title: 'My Title',
    width: 800,
    height: 500,
    hAxis: {
      gridlines: {
        color: 'transparent'
      },
      ticks: [
        {v: 0.5, f: ''},
        {v: 1, f: 'A1'},
        {v: 2, f: 'A2'},
        {v: 3, f: 'A3'},
        {v: 4, f: 'A4'}
      ]
    }
  };

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

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