前端生成图表

http://www.cnblogs.com/skiler/p/6679828.html

1、常用的前端生成图表的工具HighChartsecharts

2、具体内容可参考官方文档,有一些具体实例,JS和HTML的代码都存在,还可以编辑代码

 

3、具体的设置还可以参考官方文档

4、使用样例:




   
   
   
   






def get_data(request):
    data ={}
    from django.db import connection,connections
    cursor = connection.cursor()
    users = models.User.objects.all()
    jsondata = []
    for i in range(1,4):
        user_obj = models.User.objects.filter(id = i).first()
        cursor.execute("""select strftime("%%s",strftime("%%Y-%%m-01",respository_trouble.ctime)) * 1000 as a,count(respository_trouble.id) as num,respository_user.username from respository_trouble,respository_user WHERE respository_user.id = respository_trouble.user_id and user_id = %s group by user_id,strftime("%%Y-%%m",respository_trouble.ctime)""",[i])
        rows = cursor.fetchall()
        print(rows)
        temp = {'name':user_obj.username ,'data':rows}
        jsondata.append(temp)
    import json
    return HttpResponse(json.dumps(jsondata))
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
您可以使用开源的图表库,比如 Google Charts、Chart.js 或 Highcharts 等。这些库都提供了 .NET 和 ASP.NET 的支持,可以通过后台代码生成图表数据,并在前端页面渲染出来。下面是一个使用 Google Charts 的示例: 1. 在 HTML 页面中引入 Google Charts 的 JavaScript 库: ``` <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> ``` 2. 在后台代码中生成图表数据: ``` protected void Page_Load(object sender, EventArgs e) { // 创建一个 DataTable 对象 DataTable dt = new DataTable(); dt.Columns.Add("Year"); dt.Columns.Add("Sales"); // 添加数据行 dt.Rows.Add(new object[] { "2016", 100 }); dt.Rows.Add(new object[] { "2017", 150 }); dt.Rows.Add(new object[] { "2018", 200 }); // 将 DataTable 转换为 JSON 字符串 string json = DataTableToJson(dt); // 在页面上注册一个 JavaScript 函数,用于绘制图表 ClientScript.RegisterStartupScript(this.GetType(), "DrawChart", "drawChart('" + json + "');", true); } // 将 DataTable 转换为 JSON 字符串的方法 public static string DataTableToJson(DataTable dt) { StringBuilder sb = new StringBuilder(); sb.Append("["); for (int i = 0; i < dt.Rows.Count; i++) { sb.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { sb.Append("\"" + dt.Columns[j].ColumnName + "\":\"" + dt.Rows[i][j].ToString() + "\""); if (j < dt.Columns.Count - 1) { sb.Append(","); } } sb.Append("}"); if (i < dt.Rows.Count - 1) { sb.Append(","); } } sb.Append("]"); return sb.ToString(); } ``` 3. 在 JavaScript 中绘制图表: ``` function drawChart(json) { var data = new google.visualization.DataTable(); data.addColumn('string', 'Year'); data.addColumn('number', 'Sales'); data.addRows(JSON.parse(json)); var options = { title: 'Sales by Year', width: 500, height: 300 }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } ``` 这个示例中,我们使用了 Google Charts 库,生成了一个简单的折线图。在后台代码中,我们创建了一个 DataTable 对象,并添加了一些数据行。然后将 DataTable 转换为 JSON 字符串,并将其作为参数传递给 JavaScript 函数。在 JavaScript 函数中,我们使用 Google Charts 提供的 API,将数据绘制成图表,并将其显示在页面上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lxw1844912514

你的打赏就是对我最大的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值