javascript Chart.js - 将全局图表配置放在哪里？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25724506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js - Where to put global chart configuration?
提问by user2608266
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 折线图。我在哪里放置Chart.defaults.global = {}orChart.defaults.global.responsive = true;代码？
Chart.js docs can be found here: http://www.chartjs.org/docs/
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>
回答by hex494D49
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
但是，要使其具有响应性，您必须添加一些额外的 CSS
canvas{
width: 100% !important;
height: auto !important;
}
so there's no need for inline CSS
所以不需要内联 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.
根据下面@JustinXL 的评论和最新版本的 Chart.js 不需要额外的 CSS，因此请查看更新版本。
回答by Miguel Péres
You could set the optionsof your chart, but you can also set the global(as you asked) to avoid setting this specific property for each chart you want to instantiate.
您可以设置图表的选项，但您也可以设置全局（根据您的要求）以避免为要实例化的每个图表设置此特定属性。
You just have to set
你只需要设置
Chart.defaults.global.elements.responsive = true;
before instantiating the chart, in your case, before
在实例化图表之前，在您的情况下，之前
var myLineChart = new Chart(ctx).Line(data, options);
(P.S.: Chartjs V2)
（PS：Chartjs V2）
