Highcharts - 多个图表

Question

highcharts 的新手，但有一个简单的问题:

我需要在一个浏览器窗口中混合几个(比如 6 个或 8 个)小的 Highcharts 仪表和图表。为每个 div 创建一个单独的 div 并在每个 div 上定位一个单独的 Highcharts 实例是唯一可靠的方法吗？

作为补充:即使有替代方法，这种多 div 方法是否与任何方法一样好，或者是否有优缺点？

Answer 1

这是我在同一页面上执行多个 Highcharts 的方法。

http://jsfiddle.net/no1uknow/Jb2cb/2/

请记住，如果您想支持包括 IE8 在内的大多数浏览器，您将需要使用 jQuery 1.9.1 和 Highcharts JS 3.0.x+。这个 jsfiddle 演示将跨浏览器工作。

有许多示例对每个图表使用单数“var chart”，但我喜欢为每个 div 容器制作一个 var container_chartname。这种技术让我有更多的控制权，可以即时与每个图表进行交互。如调整大小，更新数据等。

如果您计划使用表单动态构建图表，那么您还可以“仅”使用上述 jsfiddle 示例中的 javascript 代码作为 json 回调。每次您在表单上动态点击提交时，这都会加载所有 div。

Stackoverflow 要求我在此处发布代码，但请参阅 jsfiddle 以获取完整代码...

当然，这只是我的技术，还有很多其他的......

        var container_chartCorrectiveAction = new Highcharts.Chart({
        chart: {
                renderTo: 'container_chartCorrectiveAction',

                        type: 'bar',
                        height: 195

                    },
                    title: {
                        text: 'Corrective Action'
                    },
                    subtitle: {
                        text: 'Sub-ATA () / ATA (20)'
                    },
                    xAxis: {
                        categories: ['No Defects Found-Fastener-Loose / Displaced'],
                        title: {
                            text: 'Action'
                        },
                        labels: {
                            style: {
                                width: '12000px'
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Count',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+ this.series.name +': '+ this.y +' Count';
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        },
                        series: {
                            pointWidth:10,
                            groupPadding: .05,
                            shadow: true
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom',
                        floating: false,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true,
                        labelFormatter: function() {
                            return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: { 
                        enabled: true 
                    },
                    series: [{
                name: 'Heavy',
                total: '0',
                data: [null]
                },{
                name: 'Intermediate',
                total: '0',
                data: [null]
                },{
                name: 'Line',
                total: '0',
                data: [null]
                },{
                name: 'Lite',
                total: '1',
                data: [1]
                }]
                });


        var container_chartAtaFleetAvg = new Highcharts.Chart({
        chart: {
                renderTo: 'container_chartAtaFleetAvg',

                        type: 'bar',
                        height: 185

                    },
                    title: {
                        text: 'Fleet Average'
                    },
                    subtitle: {
                        text: 'ATA (20)'
                    },
                    xAxis: {
                        categories: ['Fleet Average'],
                        title: {
                            text: ''
                        },
                        labels: {
                            style: {
                                width: '12000px'
                            }
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Average',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return ''+ this.series.name +': '+ this.y +' Average';
                        }
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        },
                        series: {
                            pointWidth:10,
                            groupPadding: .05,
                            shadow: true
                        }
                    },
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom',
                        floating: false,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true,
                        labelFormatter: function() {
                            return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa">   Total: ' + this.options.total + '</span>';
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    exporting: { 
                        enabled: true 
                    },
                    series: [{
                name: 'Intermediate',
                total: '0.35',
                data: [0.35]
                },{
                name: 'Lite',
                total: '0.3',
                data: [0.30]
                },{
                name: 'Heavy',
                total: '0.1',
                data: [0.10]
                }]
                });