可以对一个图表进行高图深化，反映在另一个图表上

Can highcharts drilldown of a chart, reflect on another chart?

本文关键字：高图深 另一个 一个      更新时间：2023-09-26

我有两个单独的div用于图表，ID为container1和container2，我想知道是否可以在container1中钻取一个堆叠列，结果可以显示在container2中，其中container1的堆叠列保持不变。真的很感谢你的帮助。

<div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

样品小提琴：http://jsfiddle.net/675kxe1q/

在同一图表中，区域图在向下钻取时显示，是否可以在不同的图表中显示？

我认为您想要的不是向下钻取，而是用第一个图表中的详细数据更新第二个图表。看一下point.events.click。这将使您获得单击的点。从这里，您可以更新/设置其他图表中的数据。点击事件逻辑：

plotOptions: {
  series: {
    point: {
      events: {
        click: function() {
          detailChart(this.category);
        }
      }
    }
  }
},

然后是一个将在container2:创建新图表的通用函数

  function detailChart(categoryName) {
    $('#container2').highcharts({
      chart: {
        type: 'column'
      },
      xAxis: {
        categories: ['week1', 'week2', 'week3', 'week5']
      },
      plotOptions: {
        series: {
          cursor: 'pointer',
          point: {
            events: {
              click: function() {
                detailChart(this.category);
              }
            }
          }
        }
      },
      series: [{
        data: [10, 20, 5, 4.9]
      }]
    });
  }

您可以关闭this.category以外的任何内容，并将详细信息系列设置为链接到单击键的数据数组。

我认为最有效的解决方案是使用默认的向下钻取，然后捕获向下钻取事件，从e.seriesOptions对象中提取钻取的序列并返回false值（停止事件）。下一步是参照系列运行新图表。

    chart: {
            type: 'column',
            events:{
                drilldown: function(e) {
                e.seriesOptions.color = e.point.color;
                detailChart(e.seriesOptions);
                return false;
              }
            }
        },
//....
  function detailChart(series) {
    console.log('d', series);
      $('#container2').highcharts({
        chart: {
          type: 'area'
        },
        xAxis: {
          categories: ['week1', 'week2', 'week3', 'week5']
        },
        plotOptions: {
          series: {
            cursor: 'pointer',
            point: {
              events: {
                click: function() {
                  detailChart(this.category);
                }
              }
            }
          }
        },
        series: [series]
      });
    }
});

示例：

  • http://jsfiddle.net/wasdf21b/
相关文章：