向ChartJS数据集添加其他属性
Adding additional properties to a Chart JS dataset
我正在尝试向ChartJS数据集添加额外的属性(对于饼图/圆环图)。我在后端有一段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
时,"segment"不在属性列表中。
我该怎么办?
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
),但这有点麻烦。
Fiddle-http://jsfiddle.net/nm9ay728/
相关文章:
- 基本D3.js:如何将具有其他属性的数据绑定到元素
- 如何在 JavaScript 中访问函数中的其他属性值作为对象属性值
- 基于其他属性查询多维数组属性
- 向ChartJS数据集添加其他属性
- 根据其他属性返回的值设置属性
- VueJS:检查属性是否具有来自其他属性的值
- 添加隐藏属性以存储其他属性值
- 在环铆钉 js 中设置其他属性
- 如何从 JavaScript 对象中提取 ID(或其他属性)
- 如何在 RaphaelJS 中根据需要为文本创建默认属性并链接其他属性
- 环回 - 基于 id 以外的其他属性的 REST 更新插入/更新
- 根据下拉列表中所选值的其他属性筛选本地剑道数据源
- 是否可以从远程文件更改引导对话框标题和其他属性
- 依赖于其他属性的 JavaScript 属性值
- 使用同一对象的其他属性初始化对象属性
- JavaScript 用具有特定 ID 的正则表达式 img 标记替换,但其他属性可以是任何属性
- 从对象内的其他属性值设置属性值
- 在 Redux 缩减器中扩展或克隆文件 Web API 对象以支持其他属性
- 复选框状态和其他属性
- 函数作为对象中的属性:引用函数内部的其他属性