Question

我有一个功能饼图，但是当我将鼠标悬停在相关的饼段上时，我希望改进样式。官方文档，在线搜索和源代码尚未提供有关如何影响图例条目的线索。有没有人有任何关于如何做到这一点的例子？

饼图目前有8个细分。如果它有帮助，这里的源代码是一个饼图段及其相关图例条目的例子：

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="0">
    <rvml:stroke class="rvml" />
    <rvml:skew class="rvml" />
    <rvml:fill class="rvml" />

<!-- raphaelid="1" through "7" have the same attributes and subelements -->

<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="8">
    <!-- same subelements as first -->

<!-- raphaelid="9" through "15" have the same attributes and subelements -->

<!-- Colored bullet just before legend entry -->
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="16">
    <!-- same subelements as first -->

<!-- Legend entry -->
<rvml:shape class="rvml" style="position: absolute; filter: ; width: 1px; height 1px; top: 0px; left: 0px;" raphael="true" raphaelid="17">
    <rvml:stroke class="rvml" />
    <rvml:textpath class="rvml" style="font: 400 12px Arial, sans-serif; v-text-align: left; v-text-kern: true;" />
    <rvml:path class="rvml" />
    <rvml:skew class="rvml" />
    <rvml:fill class="rvml" />

Answer 1

我在图表设置中找到了相关的代码块。问题是我需要使用SVG样式，这显然使用了稍微不同的术语。因为我有更多的经验，所以我更喜欢CSS。这是原始块：

pie.hover(function () {
    this.sector.stop();
    this.sector.scale(1.1, 1.1, this.cx, this.cy);
    if (this.label) {
        this.label[0].stop();
        this.label[0].attr({ oChart: 7.5 });
        this.label[1].attr({ "font-weight": 800 });
    }
}, function () {
    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");
    if (this.label) {
        this.label[0].animate({ oChart: 5 }, 500, "bounce");
        this.label[1].attr({ "font-weight": 400 });
    }
});

我需要将两条this.label [1]行改为：

this.label[1].attr({ fill: "#ff0000" }); // line 7

和

this.label[1].attr({ fill: "#ffffff" }); // line 13

此更改不会导致字体发生任何变化（我在上面提供的原始设置中出现意外情况），但只要用户将鼠标悬停在相关饼图段上，就会允许字体颜色发生变化。从我读到的内容中可以看出使用CSS设置Raphael样式的方法，但我现在没有经验或时间进入这个过程。

如果有经验的人可以指出一个很好的资源来解释如何使用CSS进行样式，我当然会感激，但是，因为这可能是我以后重复使用的工具。

一个风格的gRaphael饼图传奇怎么样？

1 个答案: