来自SQL查询数据的动态Google甜甜圈图 [英] Dynamic Google doughnut chart from sql query data

问题描述

我想制作一个用SQL查询数据填充的Google甜甜圈图.

I want to make a Google doughnut chart populated with data from a sql query.

我搜索了示例代码，但无法显示图表.

I searched for example code but has not been able to make a chart appear.

脚本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    // Global variable to hold data
        google.load('visualization', '1', { packages: ['corechart'] });
        google.setOnLoadCallback(DrawDonut);

        $(function DrawDonut() {

            var options = {
                pieHole: 0.4,      
                colors: ['#286090', '#d7d7d7']  
            };

            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Default.aspx/GetChartData',
                data: '{}',
                success:
                    function (response) {
                        drawchart(response.d);
                    },

                    error: function () {
                        alert("Error loading data! Please try again.");
                    }
            });
        })
            function drawchart(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'UnitID');
            data.addColumn('number', 'TotalUse');
            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].UnitID, dataValues[i].TotalUse]);
            }
            new google.visualization.PieChart(document.getElementById('chart')).
                draw(data, { title: "Use distributed on units" });
        }    
    </script>

HTML:

<div id="chart" style="width: 900px; height: 600px;"></div>

后面的代码:

<WebMethod()> 
Public Shared Function GetChartData(ByVal MemberIndex As String) As List(Of Object)
    Dim query As String = "SELECT Log.[UnitID], COUNT(*) As [TotalUse] FROM Log WHERE (MemberIndex_Log = @MemberIndex AND (GramSup1 + GramSup2) > 0 AND Log.[UnitID] > 5000) GROUP BY Log.[UnitID]"
    Dim constr As String = ConfigurationManager.ConnectionStrings("DefaultConnection").ConnectionString
    Dim chartData As List(Of Object) = New List(Of Object)()
    chartData.Add(New Object() {"UnitID", "TotalUse"})
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand(query)
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            cmd.Parameters.AddWithValue("@MemberIndex", Convert.ToInt32(HttpContext.Current.Session("MemberIndex")))
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    chartData.Add(New Object() {sdr("UnitID"), sdr("TotalUse")})
                End While
            End Using

           con.Close()
           Return chartData
        End Using
    End Using
End Function

我希望显示一个动态甜甜圈图，以显示分布在图表上的单位(通常是2个10个单位)的使用.

I want a dynamic doughnut chart to appear, showing the use of the units (typically from 2 10 units) distributed on the chart.

推荐答案

首先，jsapi是google图表的旧版本，不应再使用.

first, jsapi is an old version of google charts and should no longer be used.

使用loader.js代替，记下路径...

use loader.js instead, note the path...

<script src="https://www.gstatic.com/charts/loader.js"></script>

这只会更改load语句.

接下来，默认情况下，谷歌图表将等待页面加载.
无需将代码放在jquery速记文档就绪功能内-> $(function () {
将DrawDonut函数放置在ready函数中，
将其从Google回调中移出范围.
由于无法达到，因此无法运行.

next, google charts will wait for the page to load by default.
no need to place your code inside the jquery short-hand document ready function --> $(function () {
placing the DrawDonut function inside the ready function,
takes it out of scope from the google callback.
since it cannot be reached, it does not run.

最后，success& $.ajax上的error回调已被弃用，
使用done& fail答应.

last, the success & error callbacks on $.ajax have been deprecated,
use the done & fail promises instead.

推荐类似于以下代码段的设置...

recommend setup similar to the following snippet...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {
    packages: ['corechart']
  }).then(function () {
    var options = {
      title: 'Use distributed on units',
      pieHole: 0.4,
      colors: ['#286090', '#d7d7d7'],
      width: 900,
      height: 600
    };

    $.ajax({
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      url: 'Default.aspx/GetChartData',
      data: '{}'
    }).done(function (response) {
      drawchart(response.d);
    }).fail(function () {
      console.log('Error loading data! Please try again.');
    });

    function drawchart(dataValues) {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'UnitID');
      data.addColumn('number', 'TotalUse');
      for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].UnitID, dataValues[i].TotalUse]);
      }
      new google.visualization.PieChart(document.getElementById('chart')).
        draw(data, options);  // <-- use options already defined above
    }
  });
</script>

<div id="chart"></div>

---

注意:您正在此处定义options对象

var options = {
    pieHole: 0.4,      
    colors: ['#286090', '#d7d7d7']  
};

但不使用它来绘制图表，这里...

but not using it to draw the chart, here...

draw(data, { title: "Use distributed on units" });

这篇关于来自SQL查询数据的动态Google甜甜圈图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！