我正在尝试使用以下代码设置 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>
最佳答案
有两种方法可以满足您的需求。这样
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,所以请检查更新版本。
关于javascript - Chart.js - 在哪里放置全局图表配置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25724506/