javascript - Chartjs donut 消失-6ren

javascript - Chartjs donut 消失

转载作者：太空宇宙更新时间：2023-11-03 10:44:30

我在生成图表时遇到了问题，因为它只有一个数据要显示并包含所有 360º。这是示例:

<!doctype html>
<html>
  <head>
    <title>Chart Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script>
  </head>
  <body>
    <canvas width="200" height="200"></canvas>

    <script>
    var canvas =  $( 'canvas' )
      , data = [
        {
          value     : 300,
          color     : "#F7464A",
          highlight : "#FF5A5E",
          label     : "Red"
        }
      ]
      , options = {"percentageInnerCutout":70,"showTooltips":false,"animateScale":true}
      , chart   = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );
  </script>
  </body>
</html>

图表在 Android 默认浏览器上结束 360º 动画后立即消失，但在 Chrome 上不会出现。在 Sony Xperia (v4.1.2) 和 Samsung S3 上测试。

在我的桌面上没有出现这个问题，所以看起来它与默认的 Android 浏览器有关。

我还测试了最新的 chart.js版本 1.0.1-beta.4...

有一个 open issue在 github 上。

有人解决过这个问题吗？

最佳答案

在为此寻找解决方法几天后，由于直到现在我还没有得到任何回应，我进行了一些测试以确定其正常工作所支持的最小值。现在，我让它在前面提到的设备上运行。

在下面的示例中，“数据”数组有各种测试值，因此请随意测试它们和新的测试值以识别任何错误。

这就是我想出的:

<!doctype html>
<html>
  <head>
    <title>Chart Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.js"></script>
  </head>
  <body>
    <canvas width="300" height="300"></canvas>
    <script>
      var canvas        = $( 'canvas' )
        , lowestValue   = 0.001          // Minimum supported value
        , highestValue  = 0
        , emptySection  = {
              value     : lowestValue
            , color     : '#e8e8e8'
            , highlight : '#e8e8e8'
            , label     : ''
          }
        , data    = []
        /*, data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
          ]
        , data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 0
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 1
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 1
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 2
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
          ]
        , data = [
              {
                  value     : 0.000001
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0.0058
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
                }
            , {
                  value     : 1
                , color     : '#FAEC23'
                , highlight : '#FAEC23'
                , label     : 'Yellow'
              }
          ]
        , data = [
              {
                  value     : 0.00
                , color     : '#F7464A'
                , highlight : '#FF5A5E'
                , label     : 'Red'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 0.00
                , color     : '#15D42F'
                , highlight : '#15D42F'
                , label     : 'Green'
              }
            , {
                  value     : 1
                , color     : '#FAEC23'
                , highlight : '#FAEC23'
                , label     : 'Yellow'
              }
          ]*/
        , options = {
              'percentageInnerCutout': 70
            , 'showTooltips'         : false
            , 'animateScale'         : true
          }
        , chart   = {};

      // If there are no valid segments, include two new ones an set the value of one of them to 1
      // so that the chart appears.
      if ( data.length === 0 ) {
        data.push( $.extend( true, {}, emptySection ) );
        data.push( $.extend( true, {}, emptySection ) );

        data[ 0 ].value = 1;

      // Even if there are segments, we add a new one with one of the values:
      //	- 10: if the highest value of any segment is lower that the lowest allowed (0.001).
      //	- 0.001 of the highest value
      } else {

        $.each( data, function( index, el ) {
          el.value = el.value < lowestValue ? lowestValue : el.value;
          highestValue = el.value > highestValue ? el.value : highestValue;
        });

        data.push( $.extend( true, {}, emptySection ) );

        // Set the value of the new segment.
        // Get 0.001% of the highest value if it's greater that the lowest allowed.
        // If it's not greater that the lowest allowed, set it to a value big enought so the other segments don't appear.
        data[ data.length - 1 ].value = highestValue > lowestValue ? determinePercentage( highestValue ) : 10;
				}

        // Create the chart.
        chart = new Chart( canvas.get( 0 ).getContext( '2d' ) ).Doughnut( data, options );


        /**
        * Determines a specific percentage of a value. If no percentage is passed it assumes the lowest allowed (0.001).
        */
        function determinePercentage( total, percentage ) {
          percentage = percentage || lowestValue;

          return total ? ( parseFloat( total ) * percentage ) / 100 : 0;
        }

    </script>
  </body>
</html>

关于javascript - Chartjs donut 消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26402060/

文章推荐：安卓: Canvas drawBitmap？

文章推荐： c# - 有没有办法在.net中 "parameterize"连续命名的控件

文章推荐： c++ - 打印数组显示符号而不是字符 C++

文章推荐： c# - 重写一个方法但在 C# 中返回应该不同？

javascript - 为什么我的新内容没有立即在页面上显示/消失，而是在手动刷新后显示/消失？
我使用 vanilla JS 通过 AJAX 向数据库发送请求。数据写入数据库没有问题。在刷新页面之前，我看不到被放入数据库中的内容。当我删除内容时也会发生同样的情况，我必须刷新才能看到内容消失了。
Elixir Phoenix LiveView Echart 消失(消失)
抱歉，这篇文章很长，我试图提供所有信息并解释我已经尝试过的内容。问题: 我将经典的 Phoenix View 放入实时 View 中。虽然一切看起来都很好，但 echart 一完成绘制就消失了。好像
javascript - 单击按钮时选择框出现/消失
搜索了一下，没有找到我要找的东西。我有两个按钮，单击一次即可拉出两个不同的选择框，第二次单击它们就会消失。但是，我希望选择框 1 在单击按钮 2 时消失，反之亦然:选择框 2 将在单击按钮 1 时消失
ios - UILayoutViewController中的滚动时自动布局约束“消失”
我正在尝试使用自动布局使用“浮动”标题构建滚动视图。更确切地说，我正在尝试建立包含几列的日历视图。这些列中的每个列都应具有自己的标题，该标题应浮动在顶部，而该列可以垂直滚动到其下方。如果一切正常，则
jquery - 让具有类别的对象在循环中随机出现/消失
我正在尝试模仿星星背景。星星是在加载时创建并随机散布在整个网站上的。到目前为止我已经调整了一些代码。 var star="•"; var numStars=100; for(var x=1;x•";
jQuery:单击时菜单出现/消失
我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。我的案例: 我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。我需要什么:
android - OnChildClickListener 消失
我有一个可扩展的 ListView ，当我点击一行时，它会触发 onChildClick 或 onGroupClick，具体取决于我点击的是子项还是组。如果我在 xml 布局文件中添加可点击的内容(
ios - NSMutableData 消失
在我的程序中，我有一个 NSMutableData 变量，用于收集来自 http://www.nhara.org/scored_races-2013.htm 的信息。 .大约第三次从网站获取信息后，当
android - Genymotion 消失
我一直在完美地使用 Genymotion，但是从最近几天开始我的 Genymotion 并打开它的 GPS 开始，我的 Genymotion 突然消失了。但是我的 eclipse 显示 Genymot
添加文档类型时 CSS 消失
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
css - 添加到购物车按钮在悬停时立即出现/消失
关闭。这个问题需要debugging details .它目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and t
c++ - vector 消失
所以我的 Item::return_all() 有问题，因为我在 main.cpp 中调用它。早些时候我在 read_file() 和 for (auto data : example_item) 中
ios - UITableViewCells 消失
所有 UITableCells 在 UITableView 中滚动和触摸时消失。一切都以编程方式完成，我使用标准的 UITableViewCell 类。我在某处读到包含我的单元格数据的数组可能被清空
ios - UICollectionView 消失
我对 Swift 还很陌生。我的问题是我的 UICollectionView 正在消失。在 Xcode 中，它显示一切就绪，但当我在模拟器或设备上启动时，它消失了，只剩下导航栏和标签栏。有谁知道是什
javascript - 根据单选按钮的状态变化使子内容出现/消失
这是 this one的续题。较早的问题是在复选框上。但是后来我根据要求把check box改成了radio buttons。现在我需要显示子单选按钮并在母单选按钮处于事件状态时更改背景颜色。一旦它
javascript - Canvas 消失
我用 JS 写了一个简单的脚本。当我将它放入 html 文档(在 body 标签的底部)时，它工作正常。当我尝试将它放入外部文档并链接它时，脚本运行但 canvas 元素消失(刚刚检查:当我将脚本放在
jquery - 滚动页面时使元素出现/消失
我正在尝试创建一个带有固定元素的滚动页面，当用户向下滚动页面时，该元素“始终”可见。例如，带有道路背景的汽车图像。因此，当用户向下滚动页面时，汽车看起来就像在路上行驶。虽然汽车出现在道路的顶部，但它必
javascript - 使文本在单击按钮时出现/消失
这个问题在这里已经有了答案: How can I change CSS display none or block property using jQuery? (15 个答案) 关闭 4 年前。
android - 如何避免旧的小部件在主要代码返工期间失败/消失？
我在市场上有一个支持小部件的应用程序。我对应用程序进行了一些重大更改，重新设计了很多内部结构，替换/重命名 Activity 等。其他更改包括从不同的共享首选项键获取小部件配置数据，尽管我已经编写了转
java - fragment 消失
我有一个 fragment alertsfragment.java，它有一个 GridView 布局，当我打开它时，它工作正常，但是当我在其他选项卡之间滑动时，它就消失了。为了解释更多，我有一个 Ac

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Chartjs donut 消失