Question

我正在尝试通过从c＃codebehind动态传递数据来处理jquery canvasjs图表。但图表显示不正确。

以下是我尝试做的代码

我的客户端代码：

<input />

我的服务器端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testchartwithoutmaster.aspx.cs" Inherits="WebPages_testchartwithoutmaster" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="/Scripts/js/jquery-ui-1.9.2.js"></script>
    <script type="text/javascript" src="/Scripts/canvasjs.min.js"></script>
    <script type="text/javascript">

    $(function () {
        LoadChart();
    });

    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "testchart.aspx/GetChart",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = eval(r.d);
                var chart = new CanvasJS.Chart("chartContainer",
                    {
                        theme: "theme3",
                        animationEnabled: true,
                        title: {
                            text: "Crude Oil Reserves Vs Production, 2011",
                            fontSize: 30
                        },
                        toolTip: {
                            shared: true
                        },
                        axisY: {
                            title: "billion of barrels"
                        },
                        axisY2: {
                            title: "million barrels/day"
                        },
                        data: [{
                            type: "column",
                            name: "Proven Oil Reserves (bn)",
                            legendText: "Proven Oil Reserves",
                            showInLegend: true,
                            dataPoints: data
                        },
                        {
                            type: "column",
                            name: "Oil Production (million/day)",
                            legendText: "Oil Production",
                            axisYType: "secondary",
                            showInLegend: true,
                            dataPoints: data
                        }],
                        legend: {
                            cursor: "pointer",
                            itemclick: function (e) {
                                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                    e.dataSeries.visible = false;
                                }
                                else {
                                    e.dataSeries.visible = true;
                                }
                                chart.render();
                            }
                        },
                    });
                chart.render();
            }

        });
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="chartContainer" style="height: 500px; width: 50%;">
            </div>
        </div>
    </form>
</body>
</html>

通过这种方式，我尝试了但是没有正确显示。

Answer 1

我遇到了与您无法立即显示canvasjS图表列数据的问题。

你应该在ajax成功之前添加 async：false

以下是我的ajax代码

$.ajax({ type: "post", url:$_url, data: { queryDays:parseInt( days) }, async:false, success: function (data) { for(let i=0;i<data.length;i++) { barData[i] = {label:data[i].sitename , y:parseInt( data[i].times),indexLabel:data[i].times}; } }, });

jQuery Canvasjs动态传递数据后图表无法正常显示

1 个答案: