向 Chart JS 数据集添加其他属性答案

【问题标题】：Adding additional properties to a Chart JS dataset向 Chart JS 数据集添加其他属性
【发布时间】：2016-04-19 12:08:11
【问题描述】：

我正在尝试将额外的属性添加到 Chart JS 数据集（用于饼图/圆环图）。我在后端有一块 Ruby，它将以下 JSON 打印到视图中：

[
{"segment": "undetermined",
"label": "Undetermined",
"value": 420193," 
color": "#DECF3F",
"highlight": "#e2d455"
},
{"segment":"peer_review",
"label":"Peer Review",
"value":415212,
"color":"#60BD68",
"highlight":"#72c479"
}
]

“segment”属性是我希望在前端提供给我的 JS 的附加属性（库未提供）。但是，当我将此 JSON 包装在 canvas 标记中时，我无法通过 JS 访问它。

下面第二行输出上面的JSON：

<canvas id="review-type" height="235" data-facet="review_status_s">
  <%= @by_review_type %> 
</canvas>

我正在尝试使用getSegmentsAtEvent() API 调用访问“segment”属性（名称冲突意外）：

   $("#review-type").click(
    function(evt) {
      var activePoints = reviewChart.getSegmentsAtEvent(evt);

      /* extract other properties, then build an URL from them: */

      var url = "/" +locale+ "/catalog?f[" +facet_frag+ "][]=" +segment+ "&q=*:*";
      window.location = url;
    }
  );

但是，当我在 JS 控制台中检查 activePoints 时，“段”不在属性列表中。

我该怎么办？

【问题讨论】：

标签： javascript ruby-on-rails json canvas chart.js

【解决方案1】：

getSegmentsAtEvent（以及其他图表类型的等效项）返回图表元素（扇区、点、条等）。您必须使用任何图表元素属性和数据对象来计算索引，然后使用它来获取所需的附加属性。

例如，如果 pieData 是您的数据对象

$("#review-type").click(
    function (evt) {
        var activePoints = reviewChart.getSegmentsAtEvent(evt);

        if (activePoints.length)
        alert(pieData.filter(function (e) { return e.label === activePoints[0].label; })[0].segment);
            ...

您还可以在从对象传输到元素的属性上设置其他属性（例如 label），但这有点 hacky。

小提琴 - http://jsfiddle.net/nm9ay728/

【讨论】：