我如何向 chart.js 添加额外的数据(类型)
How can i add additional Data(Type) to chart.js
我已经通过添加以下代码向我的圆环图的每个部分添加了一个点击处理程序:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var chartelementid = activePoints[0].label;
alert(chartelementid);
//$('.details div').css("display", "none");
//$('#' + chartelementid).show();
}
);
这很好用,完成后它应该显示额外的 Div 以及该段的详细信息。
不幸的是,我的标签不仅仅是单个单词,所以我正在努力创建具有相同名称的 div ID...
我的想法是向每个 Segment 添加一个附加数据,如值、标签等,这样它就可以是一个 ID。但如果我只是将 ID 信息添加到 Segment 中,它将不会作为变量存在。
添加数据类型:
var dataImprove = [
{
value: 30,
color:"#001155",
highlight: "#1c2f7c",
label: "KnowHow Erhalt / Transfer & Aufbau",
id:"test"
}
]
我可以在哪里添加 chart.js 额外的数据类型,如我的 ID 上方所示,以便在 DOM 中访问?
亲切的问候马可
已找到:绘图前 chart.js 的第 999 行和第 1023 行之间 - 我添加了行
id: ChartElements[0].id,
因此具有名称 ID 的数据在 DOM 可用中。
作为替代方案,传递一个 JSON 字符串作为您的标签,然后截取以呈现。例如:
var canvas = document.getElementById(id);
var d = canvas.getContext("2d");
var chart = new Chart(d).Pie(json, {
segmentStrokeWidth: 1,
tooltipTemplate: "<%=label%>", //default the label
customTooltips: function (tooltip) {
// Hide if no tooltip
if (!tooltip) {
return;
}
var tooltipObj = JSON.parse(tooltip.text);
// etc
我已经通过添加以下代码向我的圆环图的每个部分添加了一个点击处理程序:
$("#myChart").click(
function(evt){
var activePoints = myNewChart.getSegmentsAtEvent(evt);
var chartelementid = activePoints[0].label;
alert(chartelementid);
//$('.details div').css("display", "none");
//$('#' + chartelementid).show();
}
);
这很好用,完成后它应该显示额外的 Div 以及该段的详细信息。 不幸的是,我的标签不仅仅是单个单词,所以我正在努力创建具有相同名称的 div ID...
我的想法是向每个 Segment 添加一个附加数据,如值、标签等,这样它就可以是一个 ID。但如果我只是将 ID 信息添加到 Segment 中,它将不会作为变量存在。
添加数据类型:
var dataImprove = [
{
value: 30,
color:"#001155",
highlight: "#1c2f7c",
label: "KnowHow Erhalt / Transfer & Aufbau",
id:"test"
}
]
我可以在哪里添加 chart.js 额外的数据类型,如我的 ID 上方所示,以便在 DOM 中访问?
亲切的问候马可
已找到:绘图前 chart.js 的第 999 行和第 1023 行之间 - 我添加了行
id: ChartElements[0].id,
因此具有名称 ID 的数据在 DOM 可用中。
作为替代方案,传递一个 JSON 字符串作为您的标签,然后截取以呈现。例如:
var canvas = document.getElementById(id);
var d = canvas.getContext("2d");
var chart = new Chart(d).Pie(json, {
segmentStrokeWidth: 1,
tooltipTemplate: "<%=label%>", //default the label
customTooltips: function (tooltip) {
// Hide if no tooltip
if (!tooltip) {
return;
}
var tooltipObj = JSON.parse(tooltip.text);
// etc