Javascript ChartJS仅将默认选项设置为特定画布,而不是全局设置
我有10多个图表,都是使用Javascript ChartJS仅将默认选项设置为特定画布,而不是全局设置,javascript,charts,chart.js,Javascript,Charts,Chart.js,我有10多个图表,都是使用ChartJS创建的折线图 图表一 var ctx = document.getElementById(cid).getContext('2d'); Chart.defaults.global.elements.line.tension = 0; var chartOne = new Chart(ctx, {.....} 图表二 var ctx = document.getElementById(cid).getContext('2d'); var chartTwo
ChartJS
创建的折线图
图表一
var ctx = document.getElementById(cid).getContext('2d');
Chart.defaults.global.elements.line.tension = 0;
var chartOne = new Chart(ctx, {.....}
图表二
var ctx = document.getElementById(cid).getContext('2d');
var chartTwo = new Chart(ctx, {.....}
对于chartOne,我将线张力定义为0
,而chartTwo没有线张力配置,预计默认值为0.4
。
然而,chartTwo采用了chartOne的线张力配置
如何设置<代码>图表。默认值<代码>仅用于特定画布?图表的目的。默认值<代码>意味着多个图表的值相同,因此它意味着不能有两个单独的<代码>图表。默认值<代码>设置
解决方案:
在更清楚地理解您的需求之后,下面是您可以使用公共属性做的事情。
获取数据
var中的所有非公共数据集,并在数据
中推送公共属性,如下所示,并将其传递到图表中的数据集
var数据=[{
标签:“印度”,
数据:[50,55,45,43,39],
边框颜色:“#666699”
}, {
标签:“阿联酋”,
数据:[15,22,19,17,19],
边框颜色:“#ff9933”
}, {
标签:“美国”,
数据:[75,62,77,81,77],
边框颜色:“#33cccc”
}, {
标签:“阿曼”,
数据:[15,18,23,19,21],
边框颜色:“#333300”
}, {
标签:“卡塔尔”,
数据:[26,28,27,25,26],
边框颜色:“#00cc99”
}, {
标签:“加拿大”,
数据:[75,77,72,79,71],
边框颜色:“#cc33ff”
}, {
标签:“澳大利亚”,
数据:[22,28,25,23,26],
边框颜色:“#3399ff”
}, {
标签:"中国",,
数据:[51,35,41,43,39],
边框颜色:'#ff0000'
}];
data.forEach(功能(obj){
obj.pointBackgroundColor='#fff',
obj.pointBorderWidth=2,
对象边界宽度=2,
对象线张力=0,
obj.fill=false
});
console.log(data)//将数据变量传递给图表中的数据集
,因为我在每个图表的数据集中
有10多个数据,并且每个数据行都具有相同的张力
和边框宽度
。与其每次都声明它们,我可以为整个图表设置默认值吗?@国王你能为这个案例创建一个小提琴吗?每个图表的数据集中有10多个数据,每个数据线都有相同的张力和边界宽度,并在这里共享链接。JSFiddlepointBackgroundColor
、pointBorderWidth
、borderWidth
、lineTension
和fill
对于所有行都是通用的s@theKing请检查我的最新答案和工作小提琴。