如何设计一个 gRaphael 饼图图例？答案

【问题标题】：How does one style a gRaphael pie chart legend?如何设计一个 gRaphael 饼图图例？
【发布时间】：2014-06-24 01:30:25
【问题描述】：

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

饼图目前有 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" />

【问题讨论】：

标签： graphael

【解决方案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 设置样式，我当然会很感激，因为这可能是我以后重用的工具。

【讨论】：