javascript - 为多个高图创建默认选项
问题描述
我的页面上有多个 highcharts。我想看看是否有办法创建默认选项供我重用,这样我就不必继续编写冗余代码。
代码:
图表#1
Highcharts.chart('chart1', {
chart: {
height: 257.5,
type: 'spline'
},
colors: [
'#42d4f4',
'#e6194B',
'#3cb44b',
'#911eb4',
'#800000',
'#808000'
],
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
let date_format = (filters.group_by == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
let metric_val = c.includes(this.series.name) ? this.y : d.includes(this.series.name) ? (this.y).toFixed(2) : this.y;
let tooltip = `<b><span style="color:#73879C">${this.series.name}</span></b><br /><br />
<i>${date_format}</i><br />
<span class="pull-right" style="font-weight:bold;">${metric_val}</span>`;
return tooltip;
},
useHTML: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d. %b',
month: '%b'%y',
year: '%Y'
}
},
yAxis: [{
lineWidth: 1,
title: {
text: 'Axis 1'
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'A'xis 2
}
}],
plotOptions: {
series: {
turboThreshold: 1000000
},
spline: {
marker: {
enabled: false,
symbol: 'circle'
}
}
},
series: [series1, series2, series3, series4, series7, series8]
});
图表#2
Highcharts.chart('chart2', {
chart: {
height: 257.5,
type: 'spline'
},
colors: [
'#aaffc3',
'#f58231',
'#4363d8',
'#000075',
'#fabebe',
'#ffd8b1',
'#f032e6',
'#e6beff'
],
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
formatter: function() {
let date_format = (filters.group_by == 'day') ? moment(this.key).format('MMM DD, YYYY') : moment(this.key).format('MMM YYYY');
let metric_val = c.includes(this.series.name) ? this.y : d.includes(this.series.name) ? (this.y).toFixed(2) : this.y;
let tooltip = `<b><span style="color:#73879C">${this.series.name}</span></b><br /><br />
<i>${date_format}</i><br />
<span class="pull-right" style="font-weight:bold;">${metric_val}</span>`;
return tooltip;
},
useHTML: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%d. %b',
month: '%b'%y',
year: '%Y'
}
},
yAxis: [{
lineWidth: 1,
opposite: true,
title: {
text: 'Axis 1'
}
}, {
lineWidth: 1,
title: {
text: 'Axis 2'
}
}],
plotOptions: {
series: {
turboThreshold: 1000000
},
spline: {
marker: {
enabled: false,
symbol: 'circle'
}
}
},
series: [series5, series6, series9, series10, series11, series12, series13, series14]
});
很多选项都是重复的,可以重复使用。无论如何创建一个变量来保存选项chart, title, credits, tooltip, xAxis and plotOptions
,以便稍后在其余图表中重复使用?
解决方案
使用默认选项创建一个变量,并在创建另一个变量时将其传播。
const defaultOptions = {
chart: {
height: 257.5,
type: 'spline'
},
title: {
text: ''
},
credits: {
enabled: false
},
// ...
}
const options = {
...defaultOptions,
// other options follow
}
console.log(options);
推荐阅读
- python - 如何在flask/python的SQL LIKE查询中插入变量?
- bash - run_command() { echo "+" "$@"; 是什么意思?"$@"; } 意味着在 bash 脚本中?
- bash - 以流式方式使用 Google Vision 注释
- mysql - Codeigniter:知道查询的 AI ID
- express - Nuxt plus 快速缓存解决方案
- python-3.x - 没有显示完整的 HTML 链接在哪里是字母 ćčžšđ
- javascript - Javascript字符串插值的使用方法
- android - 如何检查用户是否购买了订阅
- javascript - 使用函数缓存重新加载页面
- ios - 是否可以在 Windows 10 中使用 Android Studio 运行 ios 模拟器?