ChartJS饼图在移动设备上太小

时间:2019-03-03 16:32:26

标签: javascript html chart.js chartjs-2.6.0

我正在尝试使ChartJS饼图在移动设备上响应。所有标签和标题的比例都可以,但是在实际图表中 it looks like this

这就是我的目标it to look like

我尝试更改纵横比和响应性的真/假值,但这没有任何作用。

有人知道这里可能是什么问题吗?

JS:

Chart.defaults.global.defaultFontFamily = "Archivo";
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
      type: 'pie',
      responsive: true,
      maintainAspectRatio: false,
      data: {
          labels: ["Total Working Time", "Time Wasted On Scheduling"],
          datasets: [{
              data: [40-appendHours, 40-(40-appendHours)],
              backgroundColor: [
                '#73D500',
                '#FD4D7A',
              ],
              borderColor: [
                '#73D500',
                '#73D500'
              ],
              borderWidth: 5
          }]
      },
      options: {
        events: [],
        legend: {
          labels: {
            fontColor: '#44566c',
            fontSize: 15,
            fontStyle: "normal",
            fontFamily: "'Archivo', sans-serif"
          },
        },

        title: {
          display: true,
          text: 'Hours wasted by 1 person on scheduling per week',
          fontSize: 15,
          position: 'bottom',
          fontColor: '#44566c',
          fontFamily: "'Archivo', sans-serif"
        },
      }
  });

}); ///End

HTML:

<div class="col-md-6 order-lg-2 order-md-2 order-sm-2 order-col-2 resultsBox">
 <div class="Task">
  <h3 class="resultsFont">Results</h3>
  <p class="descriptionFont" id="savings"></p>
 <hr />
  <canvas id="myChart" class="descriptionFont"></canvas>
 </div>
</div>

0 个答案:

没有答案