使饼图变小 Chart JS

Question

我的 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);

Answer 1

要缩小饼图，请在您的图表选项中将 responsive 属性设置为 false，就像这样...

var options = {
  ...
  responsive: false,
  ...
}

Answer 2

在 var ctxPTD = $("#myChart2").get(0).getContext("2d"); 中，您可以使用 HTML DOM 元素，而不是 jQuery 元素，并且只设置高度：

var ctxPTD = document.getElementById("myChart2");
ctxPTD.height = 200;

希望有用。

使饼图变小 Chart JS

Make pie chart smaller Chart JS

javascript

size

canvas

pie-chart

chart.js