Question

我正在尝试在geochart上绘制年度数据。我希望获得最新的数据，但无论出于何种原因，最早的年份总是在实际可视化中处于领先地位。

我已经尝试重新排序表，将最近几年作为数据中的第一个条目，但没有效果。

我认为可能发生了这种情况，因为我使用了一个视图来过滤我的数据，但是过滤器没有先重新排序旧项目（所以不应该影响它的显示方式）。

我不想过滤数据，因为我使用透明度来显示所有点。以下是一些显示相同问题的示例代码：

function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Latitude');
    data.addColumn('number', 'Longitude');
    data.addColumn('number', 'Color');
    data.addColumn('number', 'Output (MW)');
    data.addRows([
      [35, 135, 2, 334],
      [35, 135, 1, 100],
      [35.1, 135.1, 1, 100],
      [35.1, 135, 1, 100],
      [35, 135.1, 1, 100],
      [34.9, 134.9, 1, 100],
      [34.9, 135, 1, 100],
      [35, 135.1, 1, 100],
  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {
    colorAxis: {
      'minValue': 1,
      'maxValue': 2,
      'values': [1, 2],
      'colors': ['black','red'],
    },
    'markerOpacity': 0.5,
    'region': 'JP'
  });
}

我可以更改第2列或第3列（0索引）中的值，或者我可以更改数据表中条目的顺序，但我会得到相同的结果。我有一种感觉，它总是在后面粘贴更大的值，所以你仍然可以看到小值，但我想知道是否有任何权威的参考，或任何方式绕过它。

无论我做什么，这都是它的样子：

我希望它看起来如下（手动操纵SVG以调整Z顺序）：

Answer 1

您是正确的，标记的顺序由大小决定，首先绘制较大的标记，使它们最终低于较小的标记，这对大多数应用程序来说都很方便。如果您希望根据订单隐藏“以后”标记，则必须采用其他方式，可能是隐藏数据行。

如果隐藏数据涵盖“早期”数据，是否有理由隐藏数据？也许可以添加一个选项来禁用此自动重新排序，尤其是如果使用透明颜色以允许您透视。

Answer 2

我玩了一会儿，我认为你是对的：它会按照大小顺序自动对标记进行z索引。如果我正确地阅读了您的意图，您希望显示年份的某些子集，并且您希望标记按年划分z索引。我认为你可以通过一些自定义过滤实现这一目标：按位置和年份对数据进行排序，然后对每个位置进行排序，每年筛选出的尺寸小于任何新年份。这样的事情应该有效：

// order by location and year (descending)
var rows = data.getSortedRows([0, 1, {column: 2, desc: true}]);
// parse the rows backwards, removing all years where a location has a newer year with a larger size value
// we don't need to parse row 0, since that will always be the latest year for some location
var size, lat, long;
for (var i = rows.length - 1; i > 0; i--) {
    size = data.getValue(rows[i], 3);
    lat = data.getValue(rows[i], 0);
    long = data.getValue(rows[i], 1);
    for (var j = i - 1; j >= 0 && lat == data.getValue(rows[j], 0) && long == data.getValue(rows[i], 1); j--) {
        if (size < data.getValue(rows[j], 3)) {
            rows.splice(i, 1);
            break;
        }
    }
}

var view = new google.visualization.DataView(data);
view.setRows(rows);

以下是基于您的代码的工作示例：http://jsfiddle.net/asgallant/36AmD/

Answer 3

试试这个，帮助我完成一个项目：

dest

是什么决定了Google Geochart中的Z-Index？

3 个答案: