javascript - Highcharts 可以对一个图表进行深入分析，反射(reflect)在另一个图表上吗？

Question

我有两个单独的图表 div，其 ID 为 container1 和 container2，我想知道是否可以向下钻取 container1 中的堆叠列，结果可以显示容器 2 中的堆叠列保持不变。 非常感谢您的帮助。

<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 。这将使您获得被单击的点。从这里您可以更新/设置不同图表中的数据。 点击事件逻辑:

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