如何在两个不同的树图中显示包含相同数据的两个框之间的关系

Question

我正在使用树状图进行比较。我正在使用 highchart.com 进行可视化。

我并排显示了两个不同的树图，因此为用户提供了一种比较方式。我想 link 两个相同的框在不同的树图中。例如，我有两个不同的树形图，并且都有一个共同的单词 "Bananas"。我希望当我将鼠标悬停在第一个树图中包含 "Bananas" 的框上时，它会突出显示第二个树图中 "Bananas" 的同一个框。

这可能吗？

这是生成树状图的代码。

Highcharts.chart('treemap1', {
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 1'
  }
});
Highcharts.chart('treemap2', {
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 2'
  }
});

.treemap-chart {
  float: left;
  width: 50%
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>

此处的输出图像： codeoutput

Answer 1

您可以通过设置 state of a the hovered point in the mouseOver event and removing the state in the mouseOut 事件来做到这一点。第一张图表和第二张图表一样，将变量 chart2 更改为 chart1:

plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function(event) {
          for (var i = 0; i < chart2.series[0].data.length; i++) {
            if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
              chart2.series[0].data[i].setState('hover')
            }
          }
        },
        mouseOut: function(event) {
          for (var i = 0; i < chart2.series[0].data.length; i++) {
            if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
              chart2.series[0].data[i].setState('')
            }
          }
        }
      }
    }
  }
},

var chart1 = Highcharts.chart('treemap1', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(event) {
            for (var i = 0; i < chart2.series[0].data.length; i++) {
              if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
                chart2.series[0].data[i].setState('hover')
              }
            }
          },
          mouseOut: function(event) {
            for (var i = 0; i < chart2.series[0].data.length; i++) {
              if (chart2.series[0].data[i].name == event.target.name && chart2.series[0].data[i].parent == event.target.parent) {
                chart2.series[0].data[i].setState('')
              }
            }
          }
        }
      }
    }
  },
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 1'
  }
});

var chart2 = Highcharts.chart('treemap2', {
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(event) {
            for (var i = 0; i < chart1.series[0].data.length; i++) {
              if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
                chart1.series[0].data[i].setState('hover')
              }
            }
          },
          mouseOut: function(event) {
            for (var i = 0; i < chart1.series[0].data.length; i++) {
              if (chart1.series[0].data[i].name == event.target.name && chart1.series[0].data[i].parent == event.target.parent) {
                chart1.series[0].data[i].setState('')
              }
            }
          }
        }
      }
    }
  },
  series: [{
    type: "treemap",
    layoutAlgorithm: 'stripes',
    alternateStartingDirection: true,
    levels: [{
      level: 1,
      layoutAlgorithm: 'sliceAndDice',
      dataLabels: {
        enabled: true,
        align: 'left',
        verticalAlign: 'top',
        style: {
          fontSize: '15px',
          fontWeight: 'bold'
        }
      }
    }],
    data: [{
      id: 'A',
      name: 'Apples',
      color: "#EC2500"
    }, {
      id: 'B',
      name: 'Bananas',
      color: "#ECE100"
    }, {
      id: 'O',
      name: 'Oranges',
      color: '#EC9800'
    }, {
      name: 'Anne',
      parent: 'A',
      value: 5
    }, {
      name: 'Rick',
      parent: 'A',
      value: 3
    }, {
      name: 'Peter',
      parent: 'A',
      value: 4
    }, {
      name: 'Anne',
      parent: 'B',
      value: 4
    }, {
      name: 'Rick',
      parent: 'B',
      value: 10
    }, {
      name: 'Peter',
      parent: 'B',
      value: 1
    }, {
      name: 'Anne',
      parent: 'O',
      value: 1
    }, {
      name: 'Rick',
      parent: 'O',
      value: 3
    }, {
      name: 'Peter',
      parent: 'O',
      value: 3
    }, {
      name: 'Susanne',
      parent: 'Kiwi',
      value: 2,
      color: '#9EDE00'
    }]
  }],
  title: {
    text: 'Treemap 2'
  }
});

 .treemap-chart {
   float: left;
   width: 50%
 }

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap1" class="treemap-chart"></div>
<div id="treemap2" class="treemap-chart"></div>

工作 jsfiddle 示例： https://jsfiddle.net/ewolden/czn1rjxu/2/

如何在两个不同的树图中显示包含相同数据的两个框之间的关系

How to show relation between two boxes containing same data in two different treemaps

treemap

highcharts