Google Charts：在相同的“X”值上绘制多个“Y”值

Posted 2021-05-05

我正在使用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>

答案

默认情况下，离散轴（字符串值）将显示所有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>

以上是关于Google Charts：在相同的“X”值上绘制多个“Y”值的主要内容，如果未能解决你的问题，请参考以下文章

使用 Google Charts 为这个 JSON 绘制柱形图 var_dump();数据

Google Charts Sankey - 节点文本样式

渲染包含 Google Charts 的多个 Livewire 组件，这些组件错误地都显示相同的数据

使用Google Charts在Stacked Column Chart中显示Y轴

Charts.newDataTable() 不适用于日期

Google Charts API更改字体