更改 Dimple.js 工具提示辅助线的颜色

Question

我正在使用 dimple.js 绘制标准条形图，并且能够更改工具提示框和条形图的颜色，但是当您将鼠标悬停在条形图上时弹出的 x,y 辅助线仍然是原来的颜色，我不知道怎么改。

Answer 1

这是一个棘手的问题，因为它没有得到 Dimple 的很好支持。没有将 class 应用到这些行，因此您不能使用 classname 为 css 定位它们（​​其他工具提示对象确实有 classname，但行元素与那些元素是分开的）。这是工具提示 HTML 的样子，供参考：

第一个 <line> 元素就是我们想要的。我找到了两个可行但很老套的选项。

1) 使用 CSS 定位行 - 工具提示作为 <g> 组添加到 svg 中的所有其他内容之后，因此您可以在中查找第一行元素该组：

svg > g:last-of-type > line {
  stroke:  lightgrey !important;
      opacity: 0.55 !important;
}

这仅适用于为每个元素更改线条的特定用例 - 它不依赖于条形颜色，如果它们不同的话。

2) 线条最初通过查看条形图的 fill 属性获得它们的颜色 - 即使您稍后用 css 屏蔽它，它仍然是它最初设置的任何颜色。所以你可以做的一件事就是覆盖原来的颜色（因为你以后无论如何都会掩盖它）。

myChart.addSeries("Cancer", dimple.plot.bar);
myChart.defaultColors = [
  new dimple.color("lightgrey")
];

除此之外，我想不出一种方法可以让线条与仅在 css 中指定的颜色相匹配，而无需更改库。 （或编写您自己的工具提示功能）。