Как показать связь между двумя полями, содержащими одни и те же данные в двух разных древовидных картах

Question

Я использую древовидные карты для сравнения. Я использую highchart.com для визуализации.

Я показываю две разные древовидные карты рядом и, следовательно, предоставляю пользователям возможность сравнения. Я хочу связать два одинаковых блока в разных древовидных картах. Например, у меня есть две разные древовидные карты, и у обоих общее слово «бананы». Я хочу, чтобы при наведении указателя мыши на поле «Бананы» в первой карте дерева оно выделило тот же блок «Бананы» во 2-й карте дерева.

Это вообще возможно?

вот код, который генерирует древовидную карту.

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 точки наведения в событии mouseOver и удалив state в 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/