Chart.js - Pie＆amp;的图表数据甜甜圈图表

Question

我需要在图表上显示数据。就像这个design是否可以使用Chart.js？或者可能有一个扩展名吗？

Answer 1

您可以使用Chart.js在设计中生成图表。

＆＃13;

＆＃13;

var data = [
  {
    value: 20,
    color:"#F7464A"
  },
  {
    value: 13.3,
    color: "#46BFBD"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 6.7,
    color: "#FDB45C"
  },
  {
    value: 46.6,
    color: "#FDB45C"
  }
]

var options =
{
  animation: false,
  tooltipTemplate: "<%= value %>%",
  tooltipFillColor: "rgba(0,0,0,0)",
  tooltipFontColor: "rgba(1,1,1,1)",
  tooltipCaretSize: 0,
  tooltipFontStyle: "bold",

  tooltipEvents: [],
  onAnimationComplete: function() { this.showTooltip(this.segments, true); }
}

var ctx = document.getElementById("myChart").getContext("2d");
var myPieChart = new Chart(ctx).Pie(data,options);

＆＃13;

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

＆＃13;

＆＃13;

＆＃13;

然而，标签的放置并不是最佳的。

Answer 2

在chats.js和Asp.net以及C＃中使用Pi聊天从数据库中检索数据 这是它为我工作的代码

 $(document).ready(function () {
 var label=parseInt($("#label1").html());
 alert(label);
            $("#Incre").click(function () {          
                $("#number").val(parseInt($("#number").val())+label);    
            });
            $("#Decre").click(function () {          
                 if($("#number").val()>0){
                     $("#number").val(parseInt($("#number").val())-label);    
                  }  
            });
});

<label id='label1'>50</label>
<input id='number' value=0></input>
<button  id='Incre'>Incre</button>
<button  id='Decre'>Decre</button>