Question

当我使用带有域type:string的散点图时，x轴上的值会重复。例如：

    dataTable.addRows([
                        [ 'A',1],
                        [ 'A',2],                                         
                        ]),

这将在x轴上显示两次A. 我做错了什么，或者这是Scatter Chart和字符串域的错误？

Answer 1

默认情况下不是错误......

如果可能，离散轴（'string'值）将显示每个行标签，即使它们重复...
它还将在单独的x坐标上绘制每个行标签的值

如果您的图表要求在相同的x坐标上绘制重复行标签的值，则为每个附加值添加数据表列或系列，例如

['A', 1, 2],
['B', 1, 2],

注意：默认情况下，每个系列都会有不同的颜色，
如果所有点都应该是相同的颜色，请使用colors选项覆盖请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['row label', 'y0', 'y1'],
    ['A', 1, 2],
    ['B', 1, 2]
  ]);

  var options = {
    colors: ['red', 'red']
  };

  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>

如果单独的x坐标正常，您只是不希望标签重复，
和标签以一致的方式重复（总是2 A，2 B等）
您可以使用配置选项hAxis.showTextEvery
这将显示所有其他行标签......

hAxis: {
  showTextEvery: 2
}

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['row label', 'y0'],
    ['A', 1],
    ['A', 2],
    ['B', 1],
    ['B', 2]
  ]);

  var options = {
    hAxis: {
      showTextEvery: 2
    }
  };

  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>

如果轴的行为类似于连续轴（'number'，'date'值），但显示字符串，使用数字而不是字符串，
并使用对象表示法覆盖格式化的值

使用对象表示法，您可以提供值（v:）和格式化值（f:）

[{v: 1, f: 'A'}, 1],
[{v: 1, f: 'A'}, 2],
[{v: 2, f: 'B'}, 1],
[{v: 2, f: 'B'}, 2],

在数据表中使用对象表示法将在默认工具提示中显示'A'

对于轴标签，您需要使用相同的符号

提供自己的ticks

hAxis: {
  ticks: [
    {v: 1, f: 'A'},
    {v: 2, f: 'B'}
  ]
}

请参阅以下工作代码段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['row label', 'y0'],
    [{v: 1, f: 'A'}, 1],
    [{v: 1, f: 'A'}, 2],
    [{v: 2, f: 'B'}, 1],
    [{v: 2, f: 'B'}, 2],
  ]);

  var options = {
    hAxis: {
      ticks: [
        {v: 0, f: ''},   // add extra room
        {v: 1, f: 'A'},
        {v: 2, f: 'B'},
        {v: 3, f: ''}    // add extra room
      ]
    }
  };

  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 Scatter图表复制了相同的域（x轴）值

1 个答案: