代码之家 › 专栏 › 技术社区 › StefanN

Google散点图复制相同的域(x轴)值

google-visualization charts

StefanN · 技术社区 · 7 年前

当我在域中使用散点图时 type:string x轴上的值将被复制。例如:

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

这将在x轴上显示两次。我是做错了什么,还是这是散点图和字符串域的错误?

1 回复 | 直到 7 年前

WhiteHat 7 年前

默认情况下,不是bug。。。

如果可能,离散轴( '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);
});

<脚本src=”https://www.gstatic.com/charts/loader.js“></script>
<div id=“chart\u 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);
});

<脚本src=”https://www.gstatic.com/charts/loader.js“></script>
<div id=“chart\u div”></div>