Chart.js. ASP. Legend Template

Question

Я искал повсюду ответ на этот вопрос. Скорее всего, это так просто и глупо, что большинство людей не столкнутся с этим. Я очень новичок в использовании JavaScript/JQuery и, в первую очередь, работаю в .NET ... в частности, C# и Web Apps.

Мой вопрос заключается в следующем.

Я использую Chart.js, чтобы нарисовать диаграмму пончика в моем веб-приложении ASP. Все работает нормально. но когда я иду, чтобы установить параметры для легенды, он не распознает несколько значений, я предполагаю, что они определены в файле 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-файл, это работает отлично.

Я предполагаю, что это из-за того, что «<%» необходимо экранировать или что-то в этом роде, из-за того, что они используются на стороне сервера.

Любая помощь была бы принята с благодарностью.

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

Детали Особенности Значение Допускает системы -%>

       <%--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, добавить общественную собственность

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

В вашей странице .aspx> в JS кода добавить

tooltipTemplate: "<%=value%>" 

Это сработало для меня