PieChart在鼠标移出时消失 [英] PieChart disappears on mouseout

问题描述

我正在根据Chartjs.org上的文档创建一个非常基本的PieChart。我想我没有做任何花哨的事情，也不添加任何无关的库。

I am creating a very basic PieChart from the documentation on Chartjs.org. I think I am not doing anything fancy, or adding any extraneous libraries.

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>

问题：
最初显示饼图后，如果将鼠标悬停在图表上，它将消失。鼠标悬停时似乎出现了工具提示，但图表/饼图本身却没有。

This behavior was noticed in the latest Firefox and Chrome browsers.

这种现象在最新的Firefox和Chrome浏览器中已经注意到。 / p>

解决方案

推荐答案

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

For a pie chart, you must pass in an array of objects with a value and an optional color property

对于饼图，您必须传递带有值和可选颜色属性的对象数组

It turns out the color property is not so optional after all. Sure, the chart will render fine (as in all black pie slices, divided by white segment stroke color, pretty bad looking by default) with no Javascript errors. But, when you mousemove and mouseout of the pie, the colors magically change to white (with the same white segment stroke color), rendering the whole pie chart invisible against a white background, with only the tooltips showing on mousemove, mouseout.

事实证明 color 属性毕竟不是那么可选。当然，该图表可以很好地呈现（就像在所有黑色饼图中一样，除以白色线段笔触颜色，默认情况下看起来很糟糕），并且没有Javascript错误。但是，当您对饼图进行鼠标移动和鼠标移出时，颜色会神奇地变为白色（具有相同的白色线段笔触颜色），从而使整个饼图在白色背景下不可见，只有工具提示显示在鼠标移出时。 p>

Chart.js文档应该记录此行为，或者将 color 设置为强制性属性或添加良好的默认颜色，

The documentation of Chart.js should either make a note of this behavior, or make color a mandatory property or add good default colors, that don't change magically with mouse events.

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

But till then, users should assume the color property is mandatory to prevent headaches.

这很重要，因为许多开发人员都希望对从服务器返回的JSON数据进行处理以添加与UI相关的信息，以使服务器端不受任何UI逻辑的影响。

This is significant, as many developers will want to massage the data JSON returned from server to add UI related info, to keep the server side free of any UI logic.

这篇关于PieChart在鼠标移出时消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！