Highcharts 实现堆叠图下钻两层的方法

最新推荐文章于 2022-07-29 11:21:43 发布

xiewen99

最新推荐文章于 2022-07-29 11:21:43 发布

阅读量4.3k

点赞数

分类专栏：开发文章标签：开发

本文链接：https://blog.csdn.net/xiewen99/article/details/52190624

版权

本文介绍如何使用Highcharts实现堆叠图的下钻功能，详细讲解了JavaScript代码实现过程，通过实例展示了如何将堆叠图下钻两层，提供了一个深入理解Highcharts钻取功能的参考资料。

摘要由CSDN通过智能技术生成

Highcharts 实现堆叠图下钻两层的方法
stack chart inside drill-down

JavaScript 代码：

//highcharts
$(function () {
   
    // stacked chart inside drill-down
    $('#highcharts-chart').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
   
                    if (!e.seriesOptions) {
                        var chart = this
                        drilldowns_avail = {
                            {% for cluster in cluster_list %}
                            '{
   {cluster.idc}}@{
   {cluster.ip}}': {
                                name: '可用空间',
                                color: '#50B432',
                                data: [
                                    {% for chunk in cluster.chunk_set.all %}
                                    ['{
   { chunk.ip }}',{
  { chunk.avail_space_tb }}],
                                    {% endfor %}
                                ],
                            },
                            {% endfor %}
                        }
                        drilldowns_used = {
                            {% for cluster