Wil*_*ier 0 javascript jquery charts
我正在尝试使用chart.js设置图表样式,但无法弄清楚如何禁用图例。同时,我想使用generateLegend()在页面上其他位置设置图例的样式。所以我只想禁用canvas元素内的图例。你们能帮我吗?
这是我的代码:
canvas id="myChart"></canvas>
<div id="legendq3"></div>
<script>
var ctx = document.getElementById("myChart");
var data = {
labels: [
"Red",
"Green",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var options = {
legendTemplate :'<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'</li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'</ul>'
}
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
document.getElementById('legendq3').innerHTML = myDoughnutChart.generateLegend();
</script>
Run Code Online (Sandbox Code Playgroud)
将此添加到options对我有用的:
plugins: {
legend: false,
}
Run Code Online (Sandbox Code Playgroud)
源代码:https : //www.chartjs.org/docs/latest/configuration/tooltip.html
对于提出这个问题的人来说,这可能为时已晚。但是,对于仍然可能遇到相同问题的下一个家伙,我仍然毫不费力地提出了适用于我的解决方案。只需将显示属性的false值传递给图例和标签属性,例如波纹管。
options: {
legend: {
display: false,
labels: {
display: false
}
}
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
8436 次 |
| 最近记录: |