Highcharts-vue: сложенные столбцы с разверткой - PullRequest
Новая
       63

Highcharts-vue: сложенные столбцы с разверткой

0 голосов
/ 31 января 2019

Я пытаюсь повторить этот график http://jsfiddle.net/edzk8Loe/, используя vue js.

Если честно, я изучаю vuejs и поэтому пытаюсь повторить уже готовые проекты, чтобы получить уверенностьбыстро.

Проблема, с которой я сталкиваюсь в данный момент, мне кажется, логическая.Функции должны создавать новые серии в качестве развертки при щелчке по столбцу, швы вообще не запускаются.Я не получаю никакой ошибки в консоли, и у меня

Пока нет четкого представления о структуре, я думаю, что я испортил код.Ниже вы найдете код, который я использую в VUE.

            <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>

Я не ищу, чтобы кто-то делал задачу вместо меня, я ничему не научусь.Идеи и советы приветствуются.

Приветствия

1 Ответ

0 голосов
/ 01 февраля 2019

Вы допустили несколько простых ошибок в своем коде.

1) Добавьте функцию updateGraph к методам диаграммы - таким образом вы можете вызвать этот метод при обратном вызове детализации

2) СохранитьСсылка на компонент диаграммы в объекте диаграммы, позволяющая использовать метод updateGraph из функции обратного вызова детализации.Вы можете сделать это, используя mounted() hook: 

mounted() {
  this.$children[0].chart.vueRef = this;
}

3) Данные должны быть функцией, которая возвращает объект со свойствами: 

data() {
   return {
     chartOptions,
     drilldownChart,
     drilldownEvent,
     drilldownLevel
   }
}

4) Добавить drilldown и drillup обратные вызовы объекта chart.events.Здесь вы можете вызвать метод updateGraph из ссылки на компонент диаграммы, сохраненной в подключенном хуке: 

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);
      }
    }
  }
}

Демо:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...