Сделать круговую диаграмму меньше диаграммы JS

У меня есть круговая диаграмма на моей странице sharepoint, которая не будет сжиматься. Чем меньше я делаю px, тем больше становится диаграмма. Например: 

<canvas id="myChart2" width="200px" height="200px" ></canvas>

Делает диаграмму огромной, в то время как 

<canvas id="myChart2" width="800px" height="200px" ></canvas>

Делает круговую диаграмму меньше.

Пирог отображается идеально, я просто не могу сделать его меньше.

Я использую некоторую java из диаграммы.JS.

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);
2 2
javascript canvas chart.js

2 ответа:

Чтобы сделать круговую диаграмму меньше, установите свойство responsive на false в настройках диаграммы, например ...

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

In var ctxPTD = $("#myChart2").get (0).getContext ("2d"); Вы можете использовать HTML DOM элемент Не jQuery Элемент и установить высоту только как....

        var ctxPTD = document.getElementById("myChart2");
        ctxPTD.height = 200;
Надеюсь, это сработает.
0