Vue.js Highcharts vue:具有向下展开功能的堆叠列
我正在尝试使用vue js复制此图表 老实说,我正在学习vuejs,因此我尝试复制已经准备好的项目,以快速获得自信 我想我目前面临的问题是合乎逻辑的。这些函数必须在单击列时创建新的向下展开序列,而不会触发接缝。我没有在控制台中得到任何错误,我 对于结构还没有完全清楚的概念,我想我把代码搞乱了。下面您将找到我在VUE中使用的代码Vue.js Highcharts vue:具有向下展开功能的堆叠列,vue.js,highcharts,stacked-chart,drilldown,Vue.js,Highcharts,Stacked Chart,Drilldown,我正在尝试使用vue js复制此图表 老实说,我正在学习vuejs,因此我尝试复制已经准备好的项目,以快速获得自信 我想我目前面临的问题是合乎逻辑的。这些函数必须在单击列时创建新的向下展开序列,而不会触发接缝。我没有在控制台中得到任何错误,我 对于结构还没有完全清楚的概念,我想我把代码搞乱了。下面您将找到我在VUE中使用的代码 <template> <div class="chartElem">
<template>
<div class="chartElem">
<div class="row">
<highcharts class="chart" :constructor-type="'chart'" :options="chartOptions"></highcharts>
</div>
</div>
</template>
<script>
import HighchartsVue from "highcharts-vue";
import Highcharts from "highcharts";
import dataModule from "highcharts/modules/data";
import drilldown from "highcharts/modules/drilldown";
drilldown( Highcharts );
dataModule( Highcharts );
let drilldownChart, drilldownEvent, drilldownLevel = 0;
const chartOptions = {
chart: {
"type": "column",
},
credits: {
"enabled": false
},
plotOptions: {
column: {
stacking: "normal",
events: {
click: function ( event ) {
return false;
}
}
},
"series": {
"borderWidth": 0,
"dataLabels": {
"enabled": true,
"style": {
"textShadow": false,
"fontSize": "10px"
}
}
}
},
"legend": {
"enabled": false,
},
"yAxis": {
"stackLabels": {
"enabled": false,
"style": {
"fontWeight": "bold",
"color": "gray"
}
}
},
"title": {
"text": "Stacked Column Drilldown Chart",
"fontWeight": "bold"
},
"xAxis": {
"title": {},
"type": "category"
},
"yAxis": [ {
"title": {
"text": "Number of Students"
},
"min": 0,
"allowDecimals": false
} ],
"series": [ {
"name": "Outstanding",
"color": "rgb(102, 168, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Very Good",
"color": "rgb(128, 183, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Satisfactory",
"color": "rgb(179, 212, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 1,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Needs Improvement",
"color": "rgb(204, 226, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
}, {
type: 'column',
"name": "Not Performing",
"color": "rgb(230, 242, 255)",
"data": [ {
"name": "English",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "105"
}, {
"name": "Social Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "119",
"drilldown": true
}, {
"name": "Science",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "126"
}, {
"name": "Maths",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "139"
}, {
"name": "Hindi",
"y": 0,
"parentCategoryHierarchyId": "0",
"graphParentId": "146"
} ]
} ]
};
export default {
data: () => ( {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
} ),
methods: {},
computed:{
drilldown: function ( e ) {
if ( !e.seriesOptions ) {
updateGraph( true, this, e );
}
},
drillup: function ( e ) {
if ( !e.seriesOptions.flag ) {
drilldownLevel = e.seriesOptions._levelNumber;
updateGraph( false );
}
}
},
mounted() {
function updateGraph( isDrilldown, chart, e ) {
if ( isDrilldown ) {
drilldownLevel++;
drilldownChart = chart;
drilldownEvent = e;
if ( drilldownLevel === 1 ) {
var drilldowns = {
'Social Science': {
name: 'Outstanding',
color: 'rgb(102, 168, 255)',
data: [ {
name: 'Geography',
y: 7,
drilldown: true
}, {
name: 'History',
y: 4
}, {
name: 'Civics',
y: 9
} ]
}
},
drilldowns2 = {
'Social Science': {
name: 'Very Good',
color: 'rgb(128, 183, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 8
}, {
name: 'Civics',
y: 2
} ],
},
},
drilldowns3 = {
'Social Science': {
name: 'Satisfactory',
color: 'rgb(179, 212, 255)',
data: [ {
name: 'Geography',
y: 4,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 1
} ],
}
},
drilldowns4 = {
'Social Science': {
name: 'Needs Improvement',
color: 'rgb(204, 226, 255)',
data: [ {
name: 'Geography',
y: 2,
drilldown: true
}, {
name: 'History',
y: 7
}, {
name: 'Civics',
y: 2
} ]
}
},
drilldowns5 = {
'Social Science': {
name: 'Not Performing',
color: 'rgb(230, 242, 255)',
data: [ {
name: 'Geography',
y: 6,
drilldown: true
}, {
name: 'History',
y: 3
}, {
name: 'Civics',
y: 0
} ],
}
},
series = drilldowns[ e.point.name ],
series2 = drilldowns2[ e.point.name ],
series3 = drilldowns3[ e.point.name ],
series4 = drilldowns4[ e.point.name ],
series5 = drilldowns5[ e.point.name ];
chart.addSingleSeriesAsDrilldown( e.point, series );
chart.addSingleSeriesAsDrilldown( e.point, series2 );
chart.addSingleSeriesAsDrilldown( e.point, series3 );
chart.addSingleSeriesAsDrilldown( e.point, series4 );
chart.addSingleSeriesAsDrilldown( e.point, series5 );
chart.applyDrilldown();
} else if ( drilldownLevel === 2 ) {
var drilldown1 = {
"Geography": {
"name": "Yes",
stacking: 'percent',
color: 'red',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown2 = {
"Geography": {
"name": "No",
stacking: 'percent',
color: 'green',
"data": [ {
"name": "Q1",
"y": 1
}, {
"name": "Q2",
"y": 2
}, {
"name": "Q3",
"y": 3
}, {
"name": "Q4",
"y": 4
} ]
}
};
var drilldown3 = {
"exampleDrilldown": {
type: 'line',
"name": "Example",
color: 'black',
"data": [ {
"name": "Q1",
"y": 10
}, {
"name": "Q2",
"y": 20
}, {
"name": "Q3",
"y": 30
}, {
"name": "Q4",
"y": 40
} ]
}
}
chart.addSingleSeriesAsDrilldown( e.point, drilldown1[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown2[ e.point.name ] );
chart.addSingleSeriesAsDrilldown( e.point, drilldown3[ 'exampleDrilldown' ] );
console.log( e );
chart.applyDrilldown();
}
}
}
}
}
</script>
从“highcharts vue”导入HighchartsVue;
从“Highcharts”导入Highcharts;
从“highcharts/modules/data”导入数据模块;
从“highcharts/modules/drilldown”导入向下展开;
向下钻取(高位图表);
数据模块(高图);
让drilldownChart,drilldownEvent,drilldownLevel=0;
常量图表选项={
图表:{
“类型”:“列”,
},
学分:{
“已启用”:false
},
打印选项:{
专栏:{
堆叠:“正常”,
活动:{
单击:功能(事件){
返回false;
}
}
},
“系列”:{
“边界宽度”:0,
“数据标签”:{
“启用”:正确,
“风格”:{
“textShadow”:false,
“fontSize”:“10px”
}
}
}
},
“传奇”:{
“启用”:false,
},
“yAxis”:{
“堆叠标签”:{
“启用”:false,
“风格”:{
“字体权重”:“粗体”,
“颜色”:“灰色”
}
}
},
“标题”:{
“文本”:“堆叠列向下展开图”,
“字体权重”:“粗体”
},
“xAxis”:{
“标题”:{},
“类型”:“类别”
},
“yAxis”:[{
“标题”:{
“文本”:“学生人数”
},
“min”:0,
“allowDecimals”:false
} ],
“系列”:[{
“姓名”:“优秀”,
“颜色”:“rgb(102168255)”,
“数据”:[{
“名称”:“英语”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“105”
}, {
“名称”:“社会科学”,
“y”:1,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“119”,
“向下钻取”:正确
}, {
“名称”:“科学”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“126”
}, {
“名称”:“数学”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“139”
}, {
“姓名”:“印地语”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“146”
} ]
}, {
键入:“列”,
“姓名”:“非常好”,
“颜色”:“rgb(128183255)”,
“数据”:[{
“名称”:“英语”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“105”
}, {
“名称”:“社会科学”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“119”,
“向下钻取”:正确
}, {
“名称”:“科学”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“126”
}, {
“名称”:“数学”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“139”
}, {
“姓名”:“印地语”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“146”
} ]
}, {
键入:“列”,
“名称”:“令人满意”,
“颜色”:“rgb(179212 255)”,
“数据”:[{
“名称”:“英语”,
“y”:0,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“105”
}, {
“名称”:“社会科学”,
“y”:1,
“parentCategoryHierarchyId”:“0”,
“graphParentId”:“119”,
“向下钻取”:正确
mounted() {
this.$children[0].chart.vueRef = this;
}
data() {
return {
chartOptions,
drilldownChart,
drilldownEvent,
drilldownLevel
}
}
chart: {
"type": "column",
events: {
drilldown: function(e) {
if (!e.seriesOptions) {
this.vueRef.updateGraph(true, this, e);
}
},
drillup: function(e) {
if (!e.seriesOptions.flag) {
this.vueRef.drilldownLevel = e.seriesOptions._levelNumber;
this.vueRef.updateGraph(false);
}
}
}
}