我正在使用Bootstrap,JQuery和Chart.js(v2)制作主页。我使用v1实现了我的实现,但是最近刚进入Bower并使用该版本下载了v2。
我正在制作一个由4列组成的网格,每个网格包含一个饼图,但是v2中的缩放比例使我无法正常工作。我希望图表能够响应,以便它们可以在较小的设备(如平板电脑和智能手机)上正确缩放,而我的问题之一是摆脱了图表图例以及将鼠标悬停在我的各部分上时的悬停信息图表。
index.html
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
<div class="col-xs-3">
<canvas id="chart1"></canvas>
</div>
</div>
</div>
</body>
functions.js
$(document).ready(function(){
var canvas = $("#chart1");
var data = {
labels: [],
datasets: [{
data: [10, 10],
backgroundColor: ["#F7464A", "#FDB45C"],
hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
}]
};
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
});
});
如果我删除了空白的“标签”字段,则该图表将无法再使用。从外观上看,图表顶部有一个很小的间距,这表明标题已写入,但它们只是空字符串。
有谁知道如何删除图例和悬停说明?我简直无法理解如何使用它
只要有时间,我就会把手伸向jsfiddle!
编辑:链接到文档:https : //nnnick.github.io/Chart.js/docs-v2/#getting-started