Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/375.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 向图表JS数据集添加其他属性_Javascript_Ruby On Rails_Json_Canvas_Chart.js - Fatal编程技术网

Javascript 向图表JS数据集添加其他属性

Javascript 向图表JS数据集添加其他属性,javascript,ruby-on-rails,json,canvas,chart.js,Javascript,Ruby On Rails,Json,Canvas,Chart.js,我正在尝试向ChartJS数据集添加额外的属性(对于饼图/甜甜圈图)。后端有一块Ruby,它将以下JSON打印到视图中: [ {"segment": "undetermined", "label": "Undetermined", "value": 420193," color": "#DECF3F", "highlight": "#e2d455" }, {"segment":"peer_review", "label":"Peer Review", "value":415212, "colo

我正在尝试向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包装在
画布
标记中时,我无法通过JS访问它

下面的第二行输出上述JSON:

<canvas id="review-type" height="235" data-facet="review_status_s">
  <%= @by_review_type %> 
</canvas>
但是,当我在JS控制台中检查
activePoints
时,“段”不在属性列表中


我该怎么办?

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);
            ...
您还可以在从对象传输到元素的属性上设置附加属性(例如,
标签
),但这有点老套


小提琴-

$("#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);
            ...