Question

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

来做

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

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

现在所有这些例子都使用了付费的工业用库，我无法负担。我的问题是，是否有任何免费图书馆可以实现相同或可以使用谷歌图表进行一些自定义

我的谷歌图书馆实施工具粘贴在

下面

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

我是否可以使工具提示永久保留，以便永久显示数据

Answer 1

阿米特，

这取决于您要实现此功能的工作量。如果你没有在d3.js之前看到它，它非常强大，灵活且免费，它肯定会为你提供创建图表所需的内容，并准确地显示你想要的信息。但是，如果您从未使用过d3，那肯定会比谷歌图书馆更多的工作。作为长期解决方案，我绝对推荐它。我不熟悉谷歌库，但滚动浏览并查看所有示例中的文本，您可能会发现只需调整列出的字体大小属性即可使其适合。

使用HTML java脚本创建可配置饼图

1 个答案: