图表的 highcharts 向下钻取可以反映在另一个图表上吗？

Question

我有两个单独的 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>

示例 fiddle : http://jsfiddle.net/675kxe1q/

这里的面积图显示在同一个图表的向下钻取中，是否可以在不同的图表中显示它？

Answer 1

我认为您想要的不是向下钻取，而是用第一个图表中的详细数据更新第二个图表。看看 point.events.click。这会让你得到被点击的点。从这里您可以 update/set 不同图表中的数据。点击事件逻辑：

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 并将您的详细信息系列设置为链接到您的点击键的数据数组。

Answer 2

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

    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/

图表的 highcharts 向下钻取可以反映在另一个图表上吗？

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

javascript

jquery

charts

highcharts

drilldown