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

如果你想在一个页面上获得两个图表，那就非常简单了。

HTML

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

Answer 2

我不确定你的一些代码试图做什么 - 似乎有点不必要的复杂，FWIW

如何在同一页面上制作多个图表 - 你就像在一个页面上制作一个图表一样，只需多次执行：）

并确保您有不同的容器元素ID - 否则您只是用下一个图表覆盖一个图表。

页面上多个图表的一个示例：

http://jsfiddle.net/kwtZr/1/

there's no relevant code to put here, just click the link

如何在一个页面上获得两个高图？

2 个答案: