Question

我到处寻找答案。更有可能的是，它是如此简单和愚蠢，以至于大多数人都不会遇到它。我是使用JavaScript / JQuery的新手，主要使用.NET ...特别是C＃和Web Apps。

我的问题如下。

我正在使用Chart.js在我的ASP网页应用程序中绘制圆环图。一切正常。但是当我去设置Legend的选项时，它不会识别一些值，我假设它是在Chart.js文件中定义的。

name.toLowerCase()

segements.length ..等。。。它声明“未知实体”

以下是该行：

legendTemplate: <%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"

注意：当我使用标准HTML文件时，这样可以正常工作。

我假设它是因为'＆lt;％'需要转义或其他东西，因为它们被用在服务器端代码隐藏中。

非常感谢任何帮助。

Answer 1

尝试

legendTemplate: '<%="<:=name.toLowerCase():>-legend\"><: for (var i=0; i<segments.length; i++){:><li><span style=\"background-color:<:=segments[i].fillColor:>\"></span><:if(segments[i].label){:><:=segments[i].label:><:}:></li><:}:></ul>".Replace(":", "%")%>'

Answer 2

细节特征值许可证系统 - ％GT;

                                <%--Donut/Pie Chart--%>
                                <div class="col-md-10">
                                    <div style="background-color:#e2e9f6; padding: 2em; height:375px;">
                                        <canvas width="658" height="375" id="doughnut" style="width: 527px; height: 300px;"></canvas>
                                    </div>
                                </div>

                            <div id="pieLegend"></div>
                            </div>

                            <%--Donut Chart--%>
                            <script>

                                $(function ()
                                {                                                                                                                                                                     
                                    var iPropertyDetails = $('.property_details').val();
                                    var iPropertyAttributes = $('.property_features').val();
                                    var iPropertyHistory = $('.property_history').val();
                                    var iPropertyAvm = $('.property_avm').val();
                                    var iPropertyPermits = $('.property_permits').val();
                                    var iPropertySystems = $('.property_systems').val();

                                    var data =
                                    [

                                        {
                                            value: Number(iPropertyDetails),
                                            color: "#f56954",
                                            highlight: "#f56954",
                                            label: "Property Details"
                                        },
                                        {
                                            value: Number(iPropertyAttributes),
                                            color: "#00a65a",
                                            highlight: "#00a65a",
                                            label: "Property Features"
                                        },
                                        {
                                            value: Number(iPropertyHistory),
                                            color: "#f39c12",
                                            highlight: "#f39c12",
                                            label: "History"
                                        },
                                        {
                                            value: Number(iPropertyAvm),
                                            color: "#3c8dbc",
                                            highlight: "#3c8dbc",
                                            label: "Value",
                                        },
                                        {
                                            value: Number(iPropertyPermits),
                                            color: "#00c0ef",
                                            highlight: "#00c0ef",
                                            label: "Permited Work",
                                        },                                                
                                        {
                                            value: Number(iPropertySystems),
                                            color: "#d2d6de",
                                            highlight: "#d2d6de",
                                            label: "Systems Work"
                                        }
                                    ];

                                    var options =
                                    {
                                        //Boolean - Whether we should show a stroke on each segment
                                        segmentShowStroke: true,
                                        //String - The colour of each segment stroke
                                        segmentStrokeColor: "#fff",
                                        //Number - The width of each segment stroke
                                        segmentStrokeWidth: 2,
                                        //Number - The percentage of the chart that we cut out of the middle
                                        percentageInnerCutout: 50, // This is 0 for Pie charts
                                        //Number - Amount of animation steps
                                        animationSteps: 100,
                                        //String - Animation easing effect
                                        animationEasing: "easeOutBounce",
                                        //Boolean - Whether we animate the rotation of the Doughnut
                                        animateRotate: true,
                                        //Boolean - Whether we animate scaling the Doughnut from the centre
                                        animateScale: true,
                                        //Boolean - whether to make the chart responsive to window resizing
                                        responsive: true,
                                        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
                                        maintainAspectRatio: true,

                                        legendTemplate: '<%="<:=name.toLowerCase():>-legend\"><: for (var i=0; i<segments.length; i++){:><li><span style=\"background-color:<:=segments[i].fillColor:>\"></span><:if(segments[i].label){:><:=segments[i].label:><:}:></li><:}:></ul>".Replace(":", "%")%>'

                                        <%--legendTemplate: "<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" --%>

                                    };

                                    var ctx = $("#doughnut").get(0).getContext("2d");
                                    var chart = new Chart(ctx);
                                    var doughnut = chart.Doughnut(data, options);
                                    var legend = doughnut.generateLegend();                                 
                                    $('#pieLegend').append(legend);
                                });

                            </script>

Answer 3

你需要替换它：

<%=texthere%>

用这个

<%="<%=texthere%" + ">" %>

和这个

<%texthere%>

用这个

<%="<%texthere%" + ">" %>

当然，用您的代码替换texthere。

所以在你的情况下试试

legendTemplate: <%= "<%=name.toLowerCase()%" + ">" %>-legend\"><%="<% for (var i=0; i<segments.length; i++){%" + ">" %><li><span style=\"background-color:<%= "<%=segments[i].fillColor%" + ">" %>\"></span><%="<%if(segments[i].label){%" + ">" %><%= "<%=segments[i].label%><%}%" + ">" %></li><%="<%}%" + ">" %></ul>"

Answer 4

在.cs文件中，添加公共属性

d_ptr

在.aspx页面＆gt;在js代码中添加

public string value;
protected void Page_Load(object sender, EventArgs e)
{ .........
     value = "<%=value%>";
}

这对我有用

Chart.js。 ASP。传奇模板

4 个答案: