问题描述
我试图用下面的代码设置一个Chart.js折线图。在这里我放置 Chart.defaults.global = {}
或 Chart.defaults.global.responsive = true;
code?
Chart.js文档可以在这里找到:
<! - 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
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.
这篇关于Chart.js - 在哪里放置全局图表配置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!