javascript - 使用 Chart.js - 为圆环图创建图例-6ren

javascript - 使用 Chart.js - 为圆环图创建图例

转载作者：塔克拉玛干更新时间：2023-11-02 22:33:36

26

4

有人可以告诉我我的代码有什么问题吗？我已经使用 Chart.js 成功生成了圆环图以及图例，但是当我将鼠标悬停在图例中的每个项目上时，我希望图表的相应部分用工具提示突出显示，就像它的作用一样在 this页

我尝试复制并修改该页面上使用的代码，但我无法让它工作。建议和帮助表示赞赏!!

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Chart.js demo</title>
        <script src='Chart.js'></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    <ul class="doughnut-legend">
        <li><span style="background-color:#40af49"></span>African American</li>
        <li><span style="background-color:#ac558a"></span>Other</li>
        <li><span style="background-color:#f05541"></span>Multi-Racial, Not Hispanic</li>
        <li><span style="background-color:#3ac2d0"></span>Hispanic/Latino</li>
        <li><span style="background-color:#faaf3c"></span>Asian</li>
        <li><span style="background-color:#4287b0"></span>White/Caucasian</li>
    </ul>
    <script>
    var pieData = [
                {
                    value: 24.8,
                    color: "#40af49",
                    label: "African American"
                },
                {
                    value : 2.9,
                    color : "#ac558a",
                    label: "Other"
                },
                {
                    value : 5.7,
                    color : "#f05541",
                    label: "Multi-Racial, Not Hispanic"
                },
                {
                    value : 19.1,
                    color : "#3ac2d0",
                    label: "Hispanic/Latino"
                },
                {
                    value : 6.5,
                    color : "#faaf3c",
                    label: "Asian"
                },
                {
                    value : 41,
                    color : "#4287b0",
                    label: "White/Caucasian"
                }
            ];

            var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, { tooltipTemplate : "<%if (label){%><%=label%>: <%}%><%= value %>%", animateRotate: true });
            var legendHolder = document.createElement('div');
        legendHolder.innerHTML = race.generateLegend();
        // Include a html legend template after the module doughnut itself
        helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index){
            helpers.addEvent(legendNode, 'mouseover', function(){
                var activeSegment = race.segments[index];
                activeSegment.save();
                race.showTooltip([activeSegment]);
                activeSegment.restore();
            });
        });
        helpers.addEvent(legendHolder.firstChild, 'mouseout', function(){
            race.draw();
        });
        canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);
        </script>
    </body>
</html>

最佳答案

在您尝试使用“助手”和“ Canvas ”的地方，您没有使用它们的范围。

Helpers指的是Chartjs helpers，可以通过创建轻松添加

var helpers = Chart.helpers

Canvas 指的是你的比赛变量 Canvas ，所以只需添加

race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);

here是一个 fiddle 与它的工作

关于javascript - 使用 Chart.js - 为圆环图创建图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25130790/

26

4

0

文章推荐： javascript - Leaflet .addLayer() 功能失败，在控制台工作

文章推荐： javascript - 如何在 jquery ajax 成功回调中获取 'clicked' 元素

文章推荐： javascript - 无法清除 parse.com 中的列

html - 图例中的 header 有效吗？ <图例>
标题

我在 visual studio 中使用它，但编译器声称 h1 不能嵌套在 legend 元素中，但浏览器无论如何都可以呈现它，所以我很困惑这是有效的还是不是？ Caption
【matplotlib基础】--图例
Matplotlib 中的图例是帮助观察者理解图像数据的重要工具。图例通常包含在图像中，用于解释不同的颜色、形状、标签和其他元素. 1. 主要参数当不设置图例的参数时，默认的图例是这样的.
mongoDB分页的两种方法(图例)
mongoDB分页的两种方法 mongoDB的分页查询是通过limit(),skip(),sort()这三个函数组合进行分页查询的下面这个是我的测试数据第一种方法查询第一页的数据：db.te
正则表达式清理我的 Grafana 图例
我的 grafana 仪表板图例中有这些名称: stats.gauges.all.cloudwatch.communicationapi.dynamodb.ca_communicationapi_re
每个句柄具有不同数量和颜色标记的 Matplotlib 图例
鉴于以下情况: import pandas as pd import matplotlib.pyplot as plt d=pd.DataFrame({'category':['a','a','a',
python - 图例 - 获取标签
我收到此错误，请问出了什么问题？ plt.legend(handles=[d1, d2]) File "/usr/lib/python3/dist-packages/matplotlib/pypl
python - 向直方图添加图例/图例
这个问题已经有答案了: python matplotlib: label in histogram (1 个回答) 已关闭 5 年前。我无法向使用 matplotlib.pyplot 创建的直方图添
javascript - 谷歌图表 - 图例
我想更改我的图例，我必须删除分页并将所有标题放在一两行中。我想更改图标。现在是这个样子我想要这样的东西我输入了 scrollArrows: 'none' 但它不起作用。这是我在 Controll
FOR 循环后的 Matlab 图例
我正在创建一个文件来读取一定数量的 .wav 文件，每个文件对应一个音符。我正在对它们中的每一个执行 FFT，并将它们全部绘制在同一个图形上。但是，我在正确打印图例时遇到了问题，它将我想要使用的名称分
r - 格式化多个 geom_sf 图例
我正在 ggplot 中处理多个 sf 几何图形，并希望以点、线和正方形(对于多边形)的形式显示图例。然而，geom_sf图例结合了我的几何特征(即结合线和点)如下所示: library(ggplot
r - 具有可变字体系列的 geom_text 图例
我想要 geom_text()标签根据变量采用字体系列。根据 ggplot2 docs 上的示例(向下滚动到底部)，我已经这样做了(与 ggplot 文档示例中的相同): library(ggplo
r - 将自定义数字添加到 ggplot 图例
我正在绘制一个 geom_tile 图，其中每个点都有一个特定的 p-value。图的绘制方式很好，p-value 限制在图例上。我想添加到这个图例的是具有这个 p-value 的数据点的数量。
r - 将条形图添加到 ggplot2 图例
我有以下 data.frame : my.df = data.frame(mean = c(0.045729661,0.030416531,0.043202944,0.025600973,0.0405
r - 将新项目添加到 ggplot2 图例
我正在绘图中打印 Case-Shiller 索引: structure(list(Date = structure(c(10957, 11048, 11139, 11231, 11323, 1141
r - 具有分类数据的栅格 map 图例
我想绘制一个包含 4 个不同值( 1 )的栅格，并带有描述类别的分类文本图例，例如 2但有彩盒: 我试过使用图例，例如: legend( 1,-20,legend = c("land","ocean/
r - 放大 ggplot2 图例
我在 R 中用 ggplot2 制作了这个图由以下代码绘制: ggplot(mtcars) + geom_smooth(fill='grey', alpha=0.3, span=0.1, aes
r - 从两个数据框构建绘图时的 ggplot 图例
我有来自两个不同数据框的数据。我正在尝试为每个数据框创建图例。我知道我可以组合数据框并进行操作，但是由于我的数据源，从两个不同的数据框进行绘图最有意义。请在下面找到简化的示例。我已经接近了，但传说中
javascript - 保存隐藏的 Highcharts 图例
我将 highchart 的图形保存为 svg。 var chart = $('#graphicName').highcharts(); EXPORT_WIDTH = 1000; render_wid
javascript - 将自定义符号设置为 HighCharts 图例
我想将自定义符号设置为图例项。目前我有矩形。我需要带有勾号的矩形(如彩色复选框)。根据文档，我可以自定义元素，例如符号附近的文本。但如果我将绘图上的所有元素都设置为自定义图像 ( Example )
r - 使用表情符号的 ggplot 图例
我有下面的代码，可以生成饼图和图例。有没有办法让表情符号和饼图具有相同的对应颜色，因为目前表情符号是黑色的。另外，我希望删除图例中的方形色 block ，并且术语“男性”和“女性”出现在正确的表情符号

首页

博学

6Ren·AI

商城

javascript - 使用 Chart.js - 为圆环图创建图例

标题