Question

我正在使用jQuery-Plugin Chart.JS为我的网站创建外观漂亮的图和图形-如果我使用静态值，则效果很好。现在，我试图根据存储在数据库表中的值动态创建图表。我读了很多有关如何做到这一点的信息（ajax-call等），但我不能仅仅弄清楚我的错在哪里。

这是我的图表脚本以及ajax方法：

$(document).ready(function () {

    $.ajax({
        type: "POST",
        url: "/ChartData.asmx/GetChartData",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess_,
        error: OnErrorCall_
    });


    // Defining chart.js-function to realize a woundchart with the size of the wound
    function OnSuccess_(response) {
        var aData = response.d;
        var array = [];
        $.each(aData, function (inx, val) {
            var obj = {};
            obj.value = val.value;
            array.push(obj);
        });
        var woundchart = document.getElementById('chartForWound');
        var chart = woundchart.getContext('2d');
        var colorFade = chart.createLinearGradient(0, 0, 0, 500); // creating linear gradient with: (x0, y0, x1, y1)
        // adding colorstops between 0 and 1 in the linear gradient
        colorFade.addColorStop(0, "#FF0000");
        colorFade.addColorStop(0.5, "#FFFF33");
        colorFade.addColorStop(1, "#00FF33");
        new Chart(chart, {
            type: 'line', // defining type of the chart as linechart
            data: {
                labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // Labels for x-Axis
                datasets: [{
                    label: "Wundgröße in mm",
                    fill: false,
                    pointRadius: 5,
                    pointHoverRadius: 7,
                    borderColor: colorFade,
                    pointBorderColor: colorFade,
                    pointBackgroundColor: colorFade,
                    pointHoverBackgroundColor: colorFade,
                    pointHoverBorderColor: colorFade,

                    data: array, // TODO: entering values from database (y-values)


                }]
            },
            // Defining further options to style the graph
            options: {
                responsive: true,
                animation: {
                    duration: 4000, // time while animation is active (4000ms)
                    easing: 'easeInQuart' // style of the animation
                },
                scales: {
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Zeit / Tage' // label for x-Axis
                        }
                    }],
                    yAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: 'Wundgröße / mm'  // label for y-Axis
                        }
                    }]
                }
            }
        });
    }
});

这是我的.asmx文件中的方法，用于从数据库的列中获取值：

 [WebMethod]
        public List<ChartData> GetChartData(List<string> chartdata){

            List<ChartData> woundData = new List<ChartData>();
            ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["pflegedokumentationConnectionString"];
            SqlConnection conn = new SqlConnection(connectionString.ConnectionString);
            SqlCommand query = new SqlCommand("SELECT measurement_results FROM epadoc_mod_wound_chart_results", conn);
            conn.Open();
            SqlDataReader dr = query.ExecuteReader();
            if (dr.HasRows)
            {
                while (dr.Read())
                {
                    ChartData data = new ChartData();
                    data.value = Convert.ToInt32(dr["measurement_results"].ToString());
                    woundData.Add(data);
                }
            }



            return woundData;

        }

运行代码时我没有收到任何错误，只是没有创建图表。

从数据库值动态创建Chart.JS

0 个答案: