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

Question

我正在使用dimple.js绘制标准条形图，并且能够更改工具提示框和条形图的颜色，但是鼠标悬停在条形图时弹​​出的x，y辅助线仍保持原始颜色，而我无法弄清楚如何改变它们。

Answer 1

这是一个棘手的问题，因为它没有得到Dimple的良好支持。没有一个类应用于这些行，因此您不能使用css的类名来定位它们（​​其他工具提示对象确实有一个类名，但行元素与那些不同）。以下是工具提示HTML的外观，供参考：

第一个<line>元素就是我们想要的。我找到了两个可行的选项，但它们都是hackish。

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中指定而不需要在库中进行更改。 （或者编写自己的工具提示功能）。