如图:对头部实现国际化 如果是英文版本则切换成英文 如果是中文版本则切换成中文
1.需引入
<script src="${pageContext.request.contextPath}/js/moment-with-locales.js"></script>
<script src="js/vis.js"></script>
<link href="css/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
2.
var optionsUS = {
groupOrder: function (a, b) {
return a.value - b.value;
},
//添加进度条
visibleFrameTemplate: function(item) {
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
}
var percentage = item.value+ '%';
return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
},
groupOrderSwap: function (a, b, groups) {
var v = a.value;
a.value = b.value;
b.value = v;
},
locale: moment.locale('en'),
orientation: 'both',
editable: false,
tooltipOnItemUpdateTime: true,
groupEditable: true,
start: startTime,
end:endTime
};
//中文
var options = {
groupOrder: function (a, b) {
return a.value - b.value;
},
//添加进度条
visibleFrameTemplate: function(item) {
if (item.visibleFrameTemplate) {
return item.visibleFrameTemplate;
}
var percentage = item.value+ '%';
return '<div class="progress-wrapper"><div class="progress" style="width:' + percentage + '"></div><label class="progress-label">' + percentage + '<label></div>';
},
groupOrderSwap: function (a, b, groups) {
var v = a.value;
a.value = b.value;
b.value = v;
},
orientation: 'both',
locale: moment.locale('zh-cn'),
editable: false,
tooltipOnItemUpdateTime: true,
groupEditable: true,
start: startTime,
end:endTime
};
3.根据中英文判断
var timeline = new vis.Timeline(container);
var lanageType=sessionStorage.getItem("sysManager_i18nLanauge");//获取国际化语言
if(lanageType=="zh"){
timeline.setOptions(options);//调用中文的options配置
}else{
timeline.setOptions(optionsUS);//调用英文的options配置
}
timeline.setGroups(groups);
timeline.setItems(items);
效果:中文版本
英文版本: