Charts Chart.js极坐标图

有人知道如何使用这个代码笔示例中的滑块来操作其类别的图表数据吗？目前只有公民类别受到影响

var-valueBubble=''；
函数updateValueBubble（位置、值、上下文）{
pos=pos | | context.position；
value=value | | context.value；
var$valueBubble=$（'.rangeslider_uuvalue-bubble'，context.$range）；
var tempPosition=pos+context.grabbos；
var position=（tempPosition=context.maxHandlePos）？context.maxHandlePos:tempPosition；
如果（$valueBubble.length）{
$valueBubble[0].style.left=Math.ceil（位置）+'px'；
$valueBubble[0]。innerHTML=value；
}
}
$（'input[type=“range”]”）。范围滑块({
polyfill:false，
onInit:function（）{
这个.range.append（$（valueBubble））；
updateValueBubble（null，null，this）；
},
滑动：功能（位置、值）{
updateValueBubble（位置、值、此）；
updateChart（0，值）；
}
});
函数updateChart（位置、值）{
myChart.data.datasets[0]。数据[位置]=值；
myChart.update（）；
}
var ctx=document.getElementById（“polarChart”）.getContext（“2d”）；
var myChart=新图表（ctx{
类型：“polarArea”，
数据：{
标签：[
“公民身份”，
“人”，
“增长”，
“管理”，
“关系”，
“健康”，
“财富”，
“欢乐”
],
数据集：[{
背景颜色：[
“#00A3CE”，
“#22CBED”，
“#EB67A2”，
“#FDA9ED”，
“#EC5B22”，
“#F78F21”，
“#148F1E”，
“#1EC428”
],
数据：[4,6,6,2,4,2,2,7]，
}],
},
选项：{
要素：{
弧：{
边框颜色：“rgba（255255,1）”，
边框宽度：2
}
},
比例：{
滴答声：{
贝吉纳泽罗：是的，
最高：8，
分:0,，
步长：1，
fontFamily:“Lato”，无衬线，
尺码：18，
fontColor:#000“，
显示：假
},
网格线：{
线宽：1，
颜色：“999”
},
},
布局：{
填充：{
左:100,，
右:200,，
前10名，
底数：10
}
},
图例：{
显示：对，
位置：“对”，
标签：{
fontFamily:“Lato”，无衬线，
尺码：18，
fontColor:#000”
}
}
}
});
@import“compass/css3”；
身体{
填充：50px0；
}
斯莱德霍尔德先生{
宽度：20%；
//高度：400px；
浮动：左；
//边框：1px实心；
//显示：无；
}
wheelCat先生{
宽度：100px；
浮动：左；
//边框：1px实心；
填充顶部：55px；
文本对齐：右对齐；
右边填充：10px；
字体系列：“拉托”，圣塞里夫；
字体大小：13px；
}
斯莱德拉尔先生{
高度：100px；
宽度：50%；
填充顶部：55px；
//边框：1px实心；
浮动：左；
}
.SliderCitizeship.RangeSloider\u填充{
背景色：#00A3CE；
}
.sliderPeople.RangeSloider\uuu填充{
背景色：#22CBED；
}
.sliderGrowth.RangeSloider\uuu填充{
背景色：#EB67A2；
}
.sliderManagement.RangeSloider\uuu填充{
背景色：#FDA9ED；
}
.sliderRelationships.Range Slider\u填充{
背景色：#EC5B22；
}
.sliderHealth.Range Slider\u填充{
背景色：#F78F21；
}
.sliderWealth.Range Slider\u填充{
背景色：#148F1E；
}
.sliderJoy.RangeSloider\u填充{
背景色：#1EC428；
}
.RangeSlaider\uuu值气泡{
显示：无；
}
*,
*：之前，
*：之后{
@包括框尺寸（边框框）；
}
.RangeSlaider\uuu值气泡{
边框：1px实心#ccc；
显示：块；
填充物：5px；
位置：绝对位置；
底部：100%；
边缘底部：25px；
宽度：100px；
左边距：-50px；
文本对齐：居中；
@包括边界半径（5px）；
字体系列：“拉托”，圣塞里夫；
字体大小：13px；
&：之前，
&：之后{
边框宽度：11px；
边框样式：实心；
边框颜色：透明；
内容：“；
显示：块；
保证金：自动；
宽度：10px；
位置：绝对位置；
左：0；
右：0；
}
&：之前{
边框顶部颜色：#ccc；
边框底宽：0；
底部：-11px；
}
&：之后{
边框顶部颜色：#fff；
边框底宽：0；
底部：-10px；
}
}

公民身份


人


生长


管理层


关系


健康


财富


快乐


这就是问题所在：

updateChart(0, value);

这负责更新数据数组位置0中的数据。当您将其更改为
updateChart（1，值）时它将更新
人员
类别数据。更改代码，以便根据单击的滑块动态设置参数

-->=下面的更新==-->

在查找代码时，我找到了RangeSloider的标识符。非常适合你的情况

我不知道这是否是传递此信息的正确方式，但它似乎起了作用

使用
updateChart（this.identifier.slice（-1），值）

快速解释-每个对象都有标识符，例如

标识符：“js-rangeslider-0”

因此，我正在获取当前对象（
此
），进入
.identifier
并获取此字符串的最后一个字符
.slice（-1）
谢谢，但我该如何做呢？更新了我的答案，如果它对您有效，请接受此答案。这非常有效！感谢您对其工作原理的解释！