High charts for HTML pages

Preface

Recently, when I was working on a project, the product said to put a polyline chart (not a polyline chart) on the front page of the background, but I went online to find it, basically a polyline chart. For example:

At the same time, there is no reference for changing keywords.

Realization of polyline graph

Can't find reference, can only grope for themselves. Then try to copy the HTML content of the line graph. The result is - only a line chart is displayed, and the console does not report an error. At first, there are some ideas. The reasons for the problems may be:

1, Data is not transmitted;

2, The problem of data binding;

3, There are 12 problems at the same time.

Finally, we found that the HTML structure at the beginning had problems, which led to problems in subsequent data binding.

The highcharts plug-in binds the id and renders the data to the corresponding id's container. The official document instance of highcharts is not obvious, so it takes a little detour.

JS code

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            //Table current page data
            list: [],
            status: '3',

        },
        created: function () {
            //this.date=vm.date["new Date"];

            this.loadData(this.status);
        },
        methods: {
            //Read data from server
            loadData(status) {
                let vm = this;
                vm.listLoading = true;
                $.getJSON('Ajax Request address', {status: status}, function (res) {
                    vm.time = [];
                    vm.number = [];
                    vm.time = res.time;//X axis time
                    vm.user=res.user;//Number of Y-axis users
                    vm.downloads=res.downloads;//Number of Y-axis Downloads
                    vm.views=res.views;//Y-axis views
                    vm.date = res.date;//Time on title
                    vm.listLoading = false;                   
                    var chart = Highcharts.chart('user', {
                        title: {
                            text: vm.date+' Number of users'
                        },
                        subtitle: {
                            text: 'Data source:'
                        },
                        yAxis: {
                            title: {
                                text: 'Number of users'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle'
                        },
                        xAxis: {
                            categories: vm.time
                        },
                        series: [
                            {
                                name: 'Number of users',
                                data: vm.user
                            },
                            
                        ],
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }
                    });
					// Highcharts.chart('id',data);
                    var chart = Highcharts.chart('download', {
                        title: {
                            text: vm.date+' Amount of Downloads'
                        },
                        subtitle: {
                            text: 'Data source:'
                        },
                        yAxis: {
                            title: {
                                text: 'Amount of Downloads'
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'middle'
                        },
                        xAxis: {
                            categories: vm.time
                        },
                        series: [
                            {
                                name: 'Amount of Downloads',
                                data: vm.downloads
                            },
                            
                        ],
                        responsive: {
                            rules: [{
                                condition: {
                                    maxWidth: 500
                                },
                                chartOptions: {
                                    legend: {
                                        layout: 'horizontal',
                                        align: 'center',
                                        verticalAlign: 'bottom'
                                    }
                                }
                            }]
                        }
                    });
                });
            },
            //Filter time type
            sel(){
                this.loadData(this.status);
            },
        },
    })

</script>

Effect

If you want to achieve multi data line graph, you can add data items in series.

			series: [
                            {
                                name: 'Number of users',
                                data: vm.user
                            },
                            {
                                name: 'Download quantity',
                                data: vm.downloads
                            },
                            {
                                name: 'Browse volume',
                                data: vm.views
                            },
                        ],

Related links

HighCharts online demo

http://www.hcharts.cn/demo/index.php

HighCharts semi Chinese API document

http://www.hcharts.cn/api/index.php

Note: Baidu found that the relevant posts did not accurately mention the key points (not many articles), and the description of the official documents was a bit messy. This personal article is more inclined to demonstrate and is more suitable for developers with weak JS foundation. If there are any mistakes, please point out them in the comment area.

Tags: Front-end Highcharts PHP Javascript Vue

Posted on Mon, 23 Mar 2020 11:57:32 -0400 by Intaglio5