使用 HTML javascript 创建可配置的饼图答案

【问题标题】：Creating configurable pie chart using HTML java script使用 HTML javascript 创建可配置的饼图
【发布时间】：2015-11-25 14:51:02
【问题描述】：

我正在尝试使用 HTML5 CSS3 开发一个宁静的网站。我的要求是我需要使用响应数据开发一个饼图，我可以使用google library for charts 来做到这一点

现在的问题是，当饼图的部分非常小时，用户必须将鼠标悬停在该部分上才能获取值，如下面的屏幕截图所示。

现在，由于它是一个监控应用程序，其中数据不断变化，因此用户不能这样做，例如在上面显示的屏幕截图中，因为知道缺席百分比用户必须将鼠标悬停在该元素上。要求是如下所示，其中显示数据而不需要悬停

现在所有这些示例都使用我买不起的工业用途付费库。我的问题是是否有任何免费库可以实现相同的功能，或者可以使用带有一些自定义功能的谷歌图表来完成相同的功能

我的google库的实现贴在下面

google.load("visualization", "1", {
  packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Lunch', 'Hours per Day'],
    ['Available', 11],
    ['Training', 2],
    ['Absent', 2],
    ['Sick', 2],
    ['Overtime', 7]
  ]);

  var options = {
    title: 'Employee Status',
    width: 400,
    height: 300,
  };

  var chart = new google.visualization.PieChart(document.getElementById('piechart'));

  chart.draw(data, options);
}

<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Supervising App</title>
  <script type="text/javascript" charset="utf-8" src="https://www.google.com/jsapi"></script>



  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>

<body>
  <div style="width:100%; height :500px; overflow:hidden; float:left; border: 1px solid #2e638e;">
    <div id="piechart" class="draggableBoth"></div>
  </div>
</body>

有没有办法可以使工具提示永久化，也可以永久显示数据

【问题讨论】：

你可以使用highChart，这里有一个example它的饼图。
顺便说一句，你的问题不是 stackoverflow 中的假设主题，请参阅page。在标题“有些问题仍然离题，即使它们属于上面列出的类别之一”，第 4 项。
@Qianyue 感谢您的回复，但 High Charts 并非免费用于商业用途检查 [链接] (highcharts.com/products/highcharts) 。对于题外话的问题，我很抱歉会记住这一点，我是这里的新手，你可以从我的个人资料图片中猜到。以后会牢记这一点
这对图表也很好raphaeljs.com
@AmitSaha 感谢您指出 HighChart 不能免费用于商业用途，我不知道。 chart.js 可以帮到你吗？我不确定。但正如 lordkain 提到的那样，rephaeljs 是用于绘图的。 d3.js 很强大，应该可以满足你的需求，但是处理起来可能太复杂了。

标签： javascript html pie-chart

【解决方案1】：

阿米特，

这取决于您要执行多少工作来实现此功能。如果您以前没有见过它d3.js，它非常强大、灵活且免费，它肯定会为您提供创建图表所需的内容，并以您想要的方式精确显示信息。但是，如果您从未使用过 d3，那么它肯定会比 google 库多一些工作。作为一个长期的解决方案，我绝对推荐它。我不熟悉 google 库，但在滚动浏览所有示例并查看文本时，您可能会发现，只需调整列出的字体大小属性，您就会使其适合。

【讨论】：