Chart.js - 用於餅圖和圓環圖的圖數據

Question

我需要在圖表上顯示數據。像這樣design Chart.js可以嗎？或者，也許這有一個擴展？

Answer 1

您可以使用Chart.js在您的設計中生成圖表。

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

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

然而，標籤的位置是不是最佳的。

Answer 2

在chats.js和Asp.net和使用丕聊天從數據庫中檢索數據的C＃ 這裏是它的工作對我來說

<script src="Scripts/Chart.js"></script> 
    <script src="Scripts/Chart.min.js"></script> 
    <script src="Scripts/jquery-1.7.1.min.js"></script> 
    <script src="http://www.chartjs.org/assets/Chart.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       var dataarr = new Array(); 
       debugger; 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "JsCps.aspx/GetDataonload", 
        data: {}, 
        async: true, 
        cache: false, 
        dataType: "json", 
        success: OnSuccess_, 
        error: OnErrorCall_ 
       }) 
       function OnErrorCall_(repo) { 
        //alert(repo); 
       } 
       function OnSuccess_(response) { 
        debugger; 
        var aData = response.d; 
        var colorarray = ["#F9E559", "#218C8D", "#6CCECB", "#EF7126", "#8EDC9D", " #473E3F"]; 
        for (var i = 0; i < aData.length; i++) { 
         //alert(aData); 
         var obj = {}; 
         obj.text = aData[i].Accounts; 
         obj.value = aData[i].Accountvalues; 
         obj.label = aData[i].Accounts; 
         var color = colorarray[i]; 
         obj.color = color; 
         dataarr.push(obj); 
        } 
        debugger; 

        //Fix for IE 8 
        if ($.browser.msie && $.browser.version == "8.0") { 
         G_vmlCanvasManager.initElement(el); 
        } 
        var helpers = Chart.helpers; 

        var canvas = document.getElementById('bar'); 
        var bar = new Chart(canvas.getContext('2d')).Pie(dataarr, { 

         responsive: false, 
         maintainAspectRatio: true, 
         animation: false 
        }); 
        for (var i = 0; i < dataarr.length; i++) { 
         var legendHolder = $("<div />"); 

         legendHolder.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + dataarr[i].color + "'></span> " + dataarr[i].text) 
         legendHolder.css("margin-top", "0px"); 
         $("#legend").append(legendHolder); 

        } 
       } 
      }); 
     </script> 
C# Code 
-------- 
[WebMethod(EnableSession = true)] 
     public static List<Chatdata> GetDataonload() 
     { 
      List<Chatdata> dataList = new List<Chatdata>(); 
      string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString(); 
      using (SqlConnection con = new SqlConnection(Constring)) 
      { 
       string countryname = string.Empty; 
       //string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd"); 
       string StartDate = DateTime.Now.AddDays(-60).ToString("yyyy-MM-dd"); 
       string EndDate = DateTime.Now.ToString("yyyy-MM-dd"); 
       SqlCommand cmd = new SqlCommand("usp_sales_Adcaps", con); 
       cmd.CommandTimeout = 50; 
       cmd.CommandType = CommandType.StoredProcedure; 
       cmd.Parameters.AddWithValue("@country", countryname); 
       cmd.Parameters.AddWithValue("@istartdate", StartDate); 
       cmd.Parameters.AddWithValue("@ienddate", EndDate); 
       con.Open(); 
       SqlDataAdapter da = new SqlDataAdapter(cmd); 
       da.SelectCommand = cmd; 
       DataTable dt = new DataTable(); 
       da.Fill(dt); 
       con.Close(); 


       foreach (DataRow dtrow in dt.Rows) 
       { 
        Chatdata details = new Chatdata(); 
        details.Accounts = dtrow[0].ToString(); 
        details.Accountvalues = Convert.ToInt64(dtrow[1].ToString()); 
        dataList.Add(details); 

       } 
       return dataList; 
      } 
     } 
    public class Chatdata 
     { 
      public string Accounts { get; set; } 
      public Int64 Accountvalues { get; set; } 
     }