Question

所以我有一个条形图，例如这个数组：

[12, 32, 42, 32, 43, 0, 0, 0, 5, 0, 0, 0]

所以我从谷歌地图中的标记得到这个数组，长度为6，因此从索引0到5。

条形图上有一个突出显示事件，当它被触发时，它会给我一个pointindex。我使用pointindex从google maps数组中获取标记，例如：＆＃34; gmap.markers [pointindex]＆＃34;。这适用于条形图数组中的前5个值。但是条形图数组中的第九个值具有pointindex 8，但我的google maps数组只有0到5作为索引。所以它不再起作用了。基本上，pointindex 8基本上是谷歌地图标记数组中的索引5。

例如，这些值也会出现此问题。

条形图数组：[12, 32, 42, 32, 43, 0, 7, 0, 5, 0, 0, 0]

Google地图标记数组，长度为7，因此索引从0到6。

我有这个代码用于图表中栏的突出显示，此事件被触发，我用标记突出显示标记（基本上更改图标。

chart.bind('jqplotDataHighlight', 
    function (ev, seriesIndex, pointIndex, data) {
        marker = gmap.markers[pointIndex];
        if (marker !== null && marker !== undefined) {
            marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png');
        }
    }
);

正如我所解释的，当条形图数组的pointindex中存在空数据时，条形图的索引不再与google标记的索引匹配。

我想在我的脑海中将条形图数组复制到一个新数组并删除包含＆＃34; 0＆＃34;的所有值。然后将条形图数组中的值与没有＆＃34; 0＆＃34;的新数组进行比较。值可以查看索引在新数组中的含义。因此它将与谷歌地图标记索引再次匹配。但是你遇到的问题是，如果条形图数组有2个相同的值，那么这个方法就不再适用了。

有没有人知道这个问题的解决方案，在我看来问题非常简单，但我无法在代码中弄清楚。

Answer 1

这是具有保留索引和稀疏访问权限的正确索引的解决方案。

var barChart = [12, 32, 42, 32, 43, 0, 7, 0, 5, 0, 0, 0],
    filtered = [];

barChart.forEach(function (a, i) {
    a && filtered.push({ value: a, index: i });
});
document.write('<pre>' + JSON.stringify(filtered, 0, 4) + '</pre>');

Answer 2

所以@Nina的解决方案原则上是有效的，但在UI交互方面则不然。

基本上你需要查看被点击的栏是否有值，如果有，它需要在Nina的过滤解决方案中映射到哪个索引。从过滤后的数组中得到值所在的索引后，可以将其映射到标记数组。

要执行此操作：

我认为最好的办法是，在构建条形图时使用类似{ filteredIndex: N }的对象来维护数组。此数组的长度与条形图的长度相同，并告诉您它在过滤后的数组中映射到哪个索引。如果数据为0，则filteredIndex将为null。

您可以简单地通过迭代数据并将值推送到已过滤的数组（如果值大于0）并在单独的映射数组中维护索引来执行此操作。

Answer 3

感谢@Alex的想法，并感谢@NinaScholz的帮助，但我认为你误解了我的问题，我知道这是一个模糊的问题，抱歉。

我已经解决了这个问题。

加载页面时我这样做：

var barArray = PF('dataChart').plot.data[0];
var mappingArray = new Array(barArray.length);
var j = 0;
for (var i = 0; i < barArray.length; i++) {
    if (barArray[i] !== 0) {
        mappingArray[i] = j;
        j++;
    } else {
        mappingArray[i] = null;
    }
}

听众现在这样做了：

chart.bind('jqplotDataHighlight', 
    function (ev, seriesIndex, pointIndex, data) {
        marker = gmap.markers[mappingArray[pointIndex]];
        if (marker !== null && marker !== undefined) {
            marker.setIcon('https://maps.gstatic.com/mapfiles/ms2/micons/blue-dot.png');
        }
    }
);

所以基本上我创建了一个与图表数组一样长的新数组，如果图表数组中的值的值不是0，我将mappingArray中此索引的值设置为计数索引，与谷歌标记索引匹配。如果可以做得更好，请告诉我们！

得到一个我需要与另一个数组匹配的索引

3 个答案: