higcharts
如果在开发中要引用higcharts插件，首先需要在config.json中的plugins中增加配置， 其次要在main.js或用户自己的创建的其他js文件中，引用该插件。
示例：
{
"develop":{
"html":"index.html",
"css":["./css/index.css"],
"entry":"./main.js",
"scripts":{
}
},
"plugins":["Highcharts","jquery"],
"services":[],
"libs":[],
"customAttributes":{
"pro":[{
"type":"BgSize",
"name":"尺寸",
"callback":"outSizeCallBack"
},
{
"type":"WidgetSelect",
"name":"样式类型",
"customInput":{
"ngvSelects":[
{ "lable": "普通", "value": "plain" },
{ "lable": "反转", "value": "inverted" },
{ "lable": "极地图", "value": "polar" }
],
"ngvModel":"plain",
"labelName":"lable",
"valueName":"value",
"ngvHeight":"100px"
},
"callback":{
"ngvModel":"typeChanged"
}
}
],
"con":[
{
"type":"BiDatasourceConfigComponent",
"customInput":{
"dimensionCount":1,
"measureCount":1,
"widgetCanDrillDown":true
},
"setDataParams":{
"simple":true
}
},{
"type":"ShadowTitleDisplay",
"name":"参与组件过滤"
}
]
}
}
在plugins中配置了2个插件:Highcharts、jquery。
在customAttributes下配置了2个样式组件，一个尺寸组件，一个下拉列表组件。
尺寸组件在里是控制的自定义外壳组件的大小，配置的回调函数也是默认的函数名。
样式类型组件，配置了3个下拉选项。并通过customInput下的ngvModel配置了默认值。
下面又配置了数据源组件，dimensionCount、和measureCount都控制维度度量显示数量为1个。
<body>
<div id="_#visroot#_" class="_#customWidget#_">
<div id="_#visroot#_container" class="_#customWidget#_container">
</div>
</div>
</body>
html文件中，可以只书写body部分，注意id和class的命名。
(function(options){
var Highcharts=window.plugins.Highcharts;
var $=window.plugins.jquery;
return {
$data:{
properties_:null,
chart:null,
categories:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
defaultData:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
dimension:{},
measure:{},
data:[],
title:'图表变换',
subtitle:'普通的'
},
$methods:{
init(){
let that=this;
this.chart = Highcharts.chart('_#visroot#_container', {
title: {
text: '图表变换'
},
subtitle: {
text: '普通的'
},
xAxis: {
categories:that.categories
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
type: 'column',
data: that.defaultData
}]
});
},
getDimensionMeasuresKeys(datasourceInfo){
datasourceInfo.data.dimension.forEach(element => {
let item=element.column;
this.dimension['column']=item.column;
this.dimension['name']=item.name;
});
datasourceInfo.data.measure.forEach(element => {
let item=element.column;
this.measure['column']=item.column;
this.measure['name']=item.name;
});
},
typeChanged(type){
switch(type) {
case 'plain':
this.chart.update({
chart: {
inverted: false,
polar: false
},
subtitle: {
text: '普通的'
}
});
break;
case 'inverted':
this.chart.update({
chart: {
inverted: true,
polar: false
},
subtitle: {
text: '反转'
}
});
break;
case 'polar':
this.chart.update({
chart: {
inverted: false,
polar: true
},
subtitle: {
text: '极地图'
}
});
break;
}
}
},
$hooks:{
onInit(properties_){
this.properties_=properties_;
this.init();
},
onDestroy(){
},
setData(data,datasourceInfo){
if(this.chart&&data&&datasourceInfo&&data.data){
this.getDimensionMeasuresKeys(datasourceInfo);
this.data=data.data[this.measure['column']];
this.categories=data.data[this.dimension['column']];
if(this.dimension.column&&this.measure.column){
this.chart.xAxis[0].setCategories(this.categories);
this.chart.series[0].update({
data: this.data
});
this.chart.update({
title: {
text: datasourceInfo.data.datasourceInfo.name
}
});
}
}
},
outSizeCallBack(info){
if(this.properties_&&this.chart){
$('#_#visroot#_container').css('height',this.properties_.style.height);
$('#_#visroot#_container').css('width',this.properties_.style.width);
this.chart&&this.chart.reflow();
}
}
}
}
})
在外层函数中声明了Highcharts和jquery的引用。
在return对象中的$data中声明了一些变量。$hooks中的onInit中进行了highcharts的初始化。