Question

我正在使用Chartjs.org上的文档创建一个非常基本的PieChart。我想我没有做任何想象，或添加任何无关的图书馆。

var data = [{
  "value": 20,
  "label": "Slice1"
}, {
  "value": 10,
  "label": "Slice2"
}];

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

问题： 最初渲染饼图后，如果我将鼠标悬停在图表上，它就会消失。当鼠标悬停时，工具提示似乎就在那里，但不是图表/饼图片本身。

最新的Firefox和Chrome浏览器都注意到了此行为。

Answer 1

因此，根据Chart.js文档，http://www.chartjs.org/docs/#doughnut-pie-chart-data-structure

对于饼图，您必须传入一个具有值和可选颜色属性的对象数组

事实证明， color 属性并非如此可选。当然，图表将呈现正常（如在所有黑色饼图片中，除以白色段笔划颜色，默认情况下非常糟糕），没有Javascript错误。但是，当你鼠标移动和鼠标移出馅饼时，颜色神奇地变为白色（具有相同的白色段笔划颜色），使整个饼图在白色背景下不可见，只有工具提示显示在mousemove，mouseout上。

Chart.js的文档应该记录这种行为，或者使 color 成为强制属性，或添加好的默认颜色，这些颜色不会因鼠标事件而神奇地改变。 / p>

但在此之前，用户应该假设 color 属性是强制性的，以防止头痛。

这很重要，因为许多开发人员都希望按下从服务器返回的数据JSON来添加UI相关信息，以保持服务器端没有任何UI逻辑。

PieChart在mouseout

1 个答案: