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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Google Charts:在相同的“X”值上绘制多个“Y”值相关的知识,希望对你有一定的参考价值。

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

这就是我现在拥有的:enter image description here

我正在针对命名实体绘制值(在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更改字体