jjzjj

javascript - 在 Chart.js 段中嵌入唯一标识符？

coder 2024-07-24 原文

我想让我的饼图具有交互性，方法是允许用户双击切片以向下钻取。我相信这样做的方法是在 Canvas 上创建一个 onclick 处理程序，并使用 getSegmentsAtEvent() 确定点击了哪个切片。

虽然调用 getSegmentsAtEvent() 返回的段数据可能不明确。以下是返回数据的示例:

[{
    "circumference": 4.1887902047863905,
    "endAngle": 8.901179185171081,
    "fillColor": "#FF5A5E",
    "highlightColor": "#FF5A5E",
    "innerRadius": 0,
    "label": "Red",
    "outerRadius": 99.5,
    "showStroke": true,
    "startAngle": 4.71238898038469,
    "strokeColor": "#fff",
    "strokeWidth": 2,
    "value": 300
}]

在这些字段中，只有 value、fillColor、highlightColor 和 label 是我提供的，并且它们都不一定是唯一的。我可以确保 label 是唯一的，但这可能会降低它对人类的可读性。

我尝试在传递给 Pie() 的数据中添加一个额外的属性(例如“id”)，但是当我从这个调用中取回段数据时，它被删除了。有没有一种方法可以在不重载 label 字段的情况下为每个段添加一个属性，我可以用它来明确地识别它们？

最佳答案

您需要覆盖饼图或创建继承自饼图的新图表类型。

这是一个新图表类型的示例，我已经传递了一个名为 id 的新属性，然后在这个图表中唯一需要不同的是，当添加数据时，这个 id 需要传递给图表

Chart.types.Pie.extend({
    name: "PieUnique",
    addData: function (segment, atIndex, silent) {
        var index = atIndex || this.segments.length;
        this.segments.splice(index, 0, new this.SegmentArc({
            value: segment.value,
            outerRadius: (this.options.animateScale) ? 0 : this.outerRadius,
            innerRadius: (this.options.animateScale) ? 0 : (this.outerRadius / 100) * this.options.percentageInnerCutout,
            fillColor: segment.color,
            highlightColor: segment.highlight || segment.color,
            showStroke: this.options.segmentShowStroke,
            strokeWidth: this.options.segmentStrokeWidth,
            strokeColor: this.options.segmentStrokeColor,
            startAngle: Math.PI * this.options.startAngle,
            circumference: (this.options.animateRotate) ? 0 : this.calculateCircumference(segment.value),
            label: segment.label,
            //add option passed
            id: segment.id
        }));
        if (!silent) {
            this.reflow();
            this.update();
        }
    },
});

var pieData = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red",
    id: "1-upi"
}, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green",
    id: "2-upi"
}, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow",
    id: "3-upi"
}, {
    value: 40,
    color: "#949FB1",
    highlight: "#A8B3C5",
    label: "Grey",
    id: "4-upi"
}, {
    value: 120,
    color: "#4D5360",
    highlight: "#616774",
    label: "Dark Grey",
    id: "5-upi"
}

];


var ctx = document.getElementById("chart-area").getContext("2d");
window.myPie = new Chart(ctx).PieUnique(pieData);

document.getElementById("chart-area").onclick = function (evt) {
    var activePoints = window.myPie.getSegmentsAtEvent(evt);
    //you can now access the id at activePoints[0].id
    console.log(activePoints);


};
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>
<canvas id="chart-area" width="400"></canvas>

关于javascript - 在 Chart.js 段中嵌入唯一标识符？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28377145/

javascriptChart34codesectionchart.js

有关javascript - 在 Chart.js 段中嵌入唯一标识符？的更多相关文章

  1. ruby - 为什么 SecureRandom.uuid 创建一个唯一的字符串？ - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion为什么SecureRandom.uuid创建一个唯一的字符串？SecureRandom.uuid#=>"35cb4e30-54e1-49f9-b5ce-4134799eb2c0"SecureRandom.uuid方法创建的字符串从不重复？

  2. ruby-on-rails - 如何从过时的 TZInfo 标识符中获取 Rails TimeZone 名称？ - 2

    已经有一个问题回答了如何将“America/Los_Angeles”转换为“PacificTime(US&Canada)”。但是我想将“美国/太平洋”和其他过时的时区转换为RailsTimeZone。我无法在图书馆中找到任何可以帮助我完成此任务的东西。 最佳答案 来自RailsActiveSupport::TimeZonedocs:TheversionofTZInfobundledwithActiveSupportonlyincludesthedefinitionsnecessarytosupportthezonesdefinedb

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 如何从 nokogiri 对象获取标识符(例如 xpath)？ - 2

    遍历nokogiri并使用xpath选择元素相当容易。我需要这个反之亦然，意思是:我需要例如在nokogiri节点上调用.to_xpath以获取元素的完整xpath以将其存储在记录中。有人知道这样做的方法吗？ 最佳答案 我能想到的最简单的方法是:Nokogiri::CSS.xpath_fornode.css_path编辑:您也可以尝试使用path方法。 关于ruby-如何从nokogiri对象获取标识符(例如xpath)？，我们在StackOverflow上找到一个类似的问题：

  5. ruby - 数组数组中的唯一元素 - 2

    我想通过内部数组中的第一个元素从数组数组中找到唯一元素。例如a=[[1,2],[2,3],[1,5]我想要类似的东西[[1,2],[2,3]] 最佳答案 uniq方法需要一个block:uniq_a=a.uniq(&:first)或者如果您想就地进行:a.uniq!(&:first)例如:>>a=[[1,2],[2,3],[1,5]]=>[[1,2],[2,3],[1,5]]>>a.uniq(&:first)=>[[1,2],[2,3]]>>a=>[[1,2],[2,3],[1,5]]或者>>a=[[1,2],[2,3],[1,5]

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http:

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库，其中大部分是用JavaScript(Node.js)编写的，一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread，目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标，所以maketest在每

  10. ruby-on-rails - 给定长度的完全随机标识符 - 2

    我想生成一个包含数字、字母和特殊字符的给定(长度可能不同)长度的完全随机的“唯一”(我将确保使用我的模型)标识符例如:161551960578281|2.AQAIPhEcKsDLOVJZ.3600.1310065200.0-514191032|有人可以建议在RubyonRails中最有效的方法吗？编辑:重要:如果可能，请评论您提出的解决方案的效率，因为每次用户进入网站时都会使用它!谢谢 最佳答案 将其用于访问token与UUID不同。您不仅需要伪随机性，而且还需要加密安全PRNG.如果您真的不关心您使用的是什么字符(它们不会增加任何

随机推荐