Question

我正在尝试使用以下代码设置Chart.js折线图。我在哪里放置Chart.defaults.global = {}或Chart.defaults.global.responsive = true;代码？

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)",
               data: [86, 74, 68, 49, 42]
           }
       ]
   };

   var options = {
       ...
   };

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

Answer 1

有两种方法可以完成您正在寻找的内容。这样

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

Working demo

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

Updated demo

Answer 2

您可以设置图表的选项，但您也可以设置全局（如您所知），以避免为您想要的每个图表设置此特定属性实例

你只需要设置

Chart.defaults.global.elements.responsive = true;

在实例化图表之前，在您的情况下，在

之前

var myLineChart = new Chart(ctx).Line(data, options);

（P.S。：Chartjs V2）

Chart.js - 在哪里放置全局图表配置？

2 个答案: