我正在尝试使用ChartJS做一些事情,但我无法在文档中找到我需要的信息,他们似乎没有论坛或任何有用的问题。
我想要完成的主要事情是一次只显示一组数据。我能够在加载时隐藏一组,但是当你点击它时,我无法弄清楚如何隐藏第一组。最终我可能有3套,需要确保隐藏其他两套。我已经阅读了如何获取点击事件,但我不确定要返回什么。
我也希望能够自定义标题&标签文本/布局,但我不确定这是否可行。
以下是我目前为代码所做的事情:
var ctx = $("#myChart");
var data = {
labels: ["LABEL1", "LABEL2", "LABEL3", "LABEL4", "LABEL5"],
datasets: [
{
label: "DATA1",
backgroundColor: "rgba(62,135,74,.5)",
pointBackgroundColor: "#34b44a",
data: [3, 3, 4, 2, 3]
},
{
label: "DATA2",
backgroundColor: "rgba(255,99,132,0.2)",
pointBackgroundColor: "rgba(255,99,132,1)",
data: [2, 2, 4, 4, 3],
hidden: true
}
]
};
var options = {
title: {
display: true,
fontColor: '#999',
fontStyle: 'regular',
fullWidth: false,
text: 'CHART TITLE'
},
legend: {
fullWidth: false,
labels: {
fontColor: '#fff',
boxWidth: 0
}
},
elements: {
line: {
}
},
scale: {
angleLines: {
color: '#666'
},
gridLines: {
color: '#666'
},
pointLabels: {
fontColor: '#fff'
},
ticks: {
min: 0,
max: 5,
stepSize: 1,
display: false
}
},
tooltips: {
enabled: false
}
};
var myRadarChart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
您可以在此处看到右侧的设计:http://codepen.io/haxen2000/pen/jBVMqK
答案 0 :(得分:0)
这是我解决方案的一支笔:http://codepen.io/haxen2000/pen/evgwmB
我刚刚拿出了我需要的内容并将它们制作成HTML元素,这样我就可以根据需要进行设计。很高兴看到ChartJS代码中的解决方案,但这将有效。
<div class='header'>
<span class='title'>CHART TITLE</span>
<button id='data1'>DATA1</button>
<button id='data2'>DATA2</button>
</div>