Chart.js - 在哪里放置全局图表配置？ [英] Chart.js - Where to put global chart configuration?

问题描述

我试图用下面的代码设置一个Chart.js折线图。在这里我放置 Chart.defaults.global = {} 或 Chart.defaults.global.responsive = true; code？

Chart.js文档可以在这里找到： http://www.chartjs.org/docs/

 <！ -  Chart.js - > 
< script src =http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js>< / script> 
< script> 
 var ctx = document.getElementById（myChart）。getContext（2d）; 
 var data = {
 labels：[Week 1，Week 2，Week 3，Week 4，Week 5，Week 6，Week 7] ，
 datasets：[
 {
 label：My Second dataset，
 fillColor：rgba（151,187,205,0.2），
 strokeColor：rgba（151,187,205 ，1），
 pointColor：rgba（151,187,205,1），
 pointStrokeColor：#fff，
 pointHighlightFill：#fff，
 pointHighlightStroke：rgba （151,187,205,1），
数据：[86,74,68,49,42] 
} 
] 
}; 
 
 var options = {
 ... 
}; 
 
 var myLineChart = new Chart（ctx）.Line（data，options）; 
< / script> 
  

解决方案

有两种方法对于。这样

  var myLineChart = new Chart（ctx）.Line（data，options）; 
 var options = Chart.defaults.global = {
 responsive：true，
 maintainAspectRatio：true 
}; 
  

或这样

  var myLineChart = new Chart（ctx）.Line（data，{
 responsive：true，
 maintainAspectRatio：true 
}）; 
  

但是，为了使其具有响应性，您必须添加一些额外的CSS

  canvas {
 width：100％！important; 
 height：auto！important; 
} 
  

因此不需要内联CSS

工作演示

根据@JustinXL的评论和最新版本的Chart.js，没有额外的CSS，所以请查看更新的版本。

更新演示

I am trying to set up a Chart.js line graph with the following code. Where in this do I place the Chart.defaults.global = {} or Chart.defaults.global.responsive = true; code?

Chart.js docs can be found here: http://www.chartjs.org/docs/

<!-- Chart.js -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var data = {
       labels: ["Week 1", "Week 2", "Week 3", "Week 4", "Week 5", "Week 6", "Week 7"],
       datasets: [
           {
               label: "My Second dataset",
               fillColor: "rgba(151,187,205,0.2)",
               strokeColor: "rgba(151,187,205,1)",
               pointColor: "rgba(151,187,205,1)",
               pointStrokeColor: "#fff",
               pointHighlightFill: "#fff",
               pointHighlightStroke: "rgba(151,187,205,1)",
               data: [86, 74, 68, 49, 42]
           }
       ]
   };

   var options = {
       ...
   };

   var myLineChart = new Chart(ctx).Line(data, options);
</script>

解决方案

There are two ways to accomplish what you're looking for. This way

var myLineChart = new Chart(ctx).Line(data, options);
var options = Chart.defaults.global = {
    responsive: true,
    maintainAspectRatio: true  
};

or, this way

var myLineChart = new Chart(ctx).Line(data, {
    responsive: true,
    maintainAspectRatio: true
});

However, to make it responsive you'll have to add some extra CSS

canvas{
    width: 100% !important;
    height: auto !important;
}

so there's no need for inline CSS

Working demo

In accordance with the comment of @JustinXL below and the latest version of Chart.js there's no need for extra CSS, so check out the updated version.

Updated demo

这篇关于Chart.js - 在哪里放置全局图表配置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！