我的sharepoint页面上的饼图不会缩小。我使得px越小,图表越大。例如:
<canvas id="myChart2" width="200px" height="200px" ></canvas>
使图表变得更大
<canvas id="myChart2" width="800px" height="200px" ></canvas>
使饼图更小。
馅饼显示完美我只是不能让它变小。
我正在使用Chart.JS中的一些java。
HTML是:
<canvas id="myChart2" width="200px" height="200px" ></canvas>
图表选项包括:
var options = {
tooltipEvents: [],
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
tooltipTemplate: "<%= label %> - <%= value %>",
responsive: true,
scaleBeginAtZero: true,
// you don't have to define this here, it exists inside the global defaults
legendTemplate: "<ul class=\"<%=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>"
}
// context
var ctxPTD = $("#myChart2").get(0).getContext("2d");
// data
var dataPTD = [{
label: "Active",
color: "#5093ce",
highlight: "#78acd9",
value: totalActive++
},
{
label: "Completed",
color: "#c7ccd1",
highlight: "#e3e6e8",
value: totalInActive++
}
]
var itemStatuses = new Chart(ctxPTD).Pie(dataPTD, options);
答案 0 :(得分:2)
要缩小饼图,请在图表选项中将responsive
属性设置为false
,如此...
var options = {
...
responsive: false,
...
}
答案 1 :(得分:0)
在 var ctxPTD = $(&#34;#myChart2&#34;)。get(0).getContext(&#34; 2d&#34;); 你可以使用{{1元素非HTML DOM
元素,并设置高度仅为....
jQuery
希望它有效。