Asp.net Chart.js。ASP。图例模板
我到处寻找答案。更有可能的是，它是如此简单和愚蠢，以至于大多数人都不会遇到它。我对使用JavaScript/JQuery非常陌生，主要在.NET中工作。。。特别是C#和Web应用程序 我的问题如下 我正在使用Chart.js在我的ASP web应用程序中绘制圆环图。一切正常。但当我为图例设置选项时，它将无法识别一些值，我假设这些值是在Chart.js文件中定义的Asp.net Chart.js。ASP。图例模板,asp.net,legend,chart.js,Asp.net,Legend,Chart.js,我到处寻找答案。更有可能的是，它是如此简单和愚蠢，以至于大多数人都不会遇到它。我对使用JavaScript/JQuery非常陌生，主要在.NET中工作。。。特别是C#和Web应用程序 我的问题如下 我正在使用Chart.js在我的ASP web应用程序中绘制圆环图。一切正常。但当我为图例设置选项时，它将无法识别一些值，我假设这些值是在Chart.js文件中定义的 name.toLowerCase() 分段。长度。。等等。它表示“未知实体” 这是一句话： legendTemplate: <
name.toLowerCase()
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>"
legendTemplate:-legend\“>”
legendTemplate:“”。替换（“：”，“%”%>”
<%--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>
$（函数（）
{
var iPropertyDetails=$（'.property_details'）.val（）；
var iPropertyAttributes=$（'.property_features'）.val（）；
var iPropertyHistory=$（'.property_history'）.val（）；
var iPropertyAvm=$（'.property_avm'）.val（）；
var iPropertyPermits=$（'.property_-permissions'）.val（）；
var iPropertySystems=$（'.property_systems'）.val（）；
var数据=
[
{
值：数字（iPropertyDetails），
颜色：“f56954”，
亮点：“f56954”，
标签：“属性详细信息”
},
{
值：数量（iPropertyAttributes），
颜色：“00a65a”，
亮点：“00a65a”，
标签：“属性特征”
},
{
值：编号（iPropertyHistory），
颜色：“f39c12”，
亮点：“f39c12”，
标签：“历史”
},
{
值：编号（iPropertyAvm），
颜色：“3c8dbc”，
亮点：“3c8dbc”，
标签：“价值”，
},
{
值：数字（iPropertyPermits），
颜色：“00c0ef”，
亮点：“00c0ef”，
标签：“许可作品”，
},
{
值：编号（iPropertySystems），
颜色：“d2d6de”，
亮点：“d2d6de”，
标签：“系统工作”
}
];
var期权=
{
//布尔-我们是否应该在每个线段上显示笔划
这是真的，
//字符串-每段笔划的颜色
segmentStrokeColor:#fff“，
//数字-每个线段笔划的宽度
分段行程宽度：2，
//数字-我们从中间剪下的图表百分比
percentageInnerCutout:50，//对于饼图，这是0
<%--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>
<%=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>"
public string value;
protected void Page_Load(object sender, EventArgs e)
{ .........
value = "<%=value%>";
}
tooltipTemplate: "<%=value%>"