highcharts - 如何在一页上显示两个 Highcharts ？

Question

我有两个图表，我试图将它们加载到同一页面上的单独 div 上，它们很相似，但一个是向下钻取，另一个不是。我尝试用 var chart = $('#review').highcharts({ 包装整个函数但它不起作用。

下面是两张图表:

$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
            name = 'Votes',
            data = [{
                    y: 1,
                    color: colors[0],
               }, {
                    y: 2,
                    color: colors[1],

                },  {
                    y: 3,
                    color: colors[2],

                },{
                    y: 5,
                    color: colors[3],

                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#review').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Review breakdown'
            },
           xAxis: {
                categories: categories
            },


            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
                             return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },  yAxis: {min: 0, max: 5, 
                    title: {text: 'Star Rating'}
                   }
        })
        .highcharts(); // return chart
    });


$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['positive', 'negative', 'sum'],
            name = 'Votes',
            data = [{
                    y: 55.11,
                    color: colors[0],
                    drilldown: {
                        name: 'Positive votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [10.85, 7.35, 33.06],
                        color: colors[0]
                    }
                }, {
                    y: -7.15,
                    color: colors[3],
                    drilldown: {
                        name: 'Negative votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [-4.55, -1.42, -0.23],
                        color: colors[3]
                    }
                }, {
                    y: 2.14,
                    color: colors[4],
                    drilldown: {
                        name: 'Total votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [ 0.12, 0.37, 1.65],
                        color: colors[4]
                    }
                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#votes').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Vote breakdown'
            },
            subtitle: {
                text: 'Click the columns to view breakdown.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total votes'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' votes</b><br/>';
                    if (point.drilldown) {
                        s += 'Click to view '+ point.category +' breakdown';
                    } else {
                        s += 'Click to return';
                    }
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },
        })
        .highcharts(); // return chart
    });

Answer 1

如果您想在一页上显示两个图表，那么这非常简单。

    <div id="chart-A" class="chart"></div>
    <div class="spacer"></div>
    <div id="chart-B" class="chart"></div>

CSS - 只是为了让示例看起来更容易一些

    .chart {
        height: 200px;
    }

    .spacer {
        height: 20px;
    }

JavaScript

    $(function() {

        // If you need to specify any global settings such as colors or other settings you can do that here

        // Build Chart A
        $('#chart-A').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Chart A'
            },
            xAxis: {
                categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Apple Consumption'
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                shared: true
            },
            series: [{
                name: 'Apples',
                data: [5, 3, 8, 2, 4]            
            }]
        });

        // Build Chart B
        $('#chart-B').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Chart B'
            },
            xAxis: {
                categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Miles during Run'
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                shared: true
            },
            series: [{
                name: 'Miles',
                data: [2.4, 3.8, 6.1, 5.3, 4.1]
            }]
        });
    });

这是一个 JSFiddle:http://jsfiddle.net/engemasa/7cvCX/