例如，我有两个树图，两个树图代表相同的数据，但代表不同的实体。我使用这些并排的树图进行比较。
在“Treemap 1”中，我有动词“Apply”，其权重为50.在“Treeamp 2”中，我有相同的动词，但是体重年龄为25.当我们第一次看到这些框时，他们的体重年龄看起来相同因为它们的大小几乎相同。
这是一个问题和不公平的信息表示。分配给每个动词的框大小是按照整个树形图的权重年龄，所以这是有道理的，但从比较的角度看它是不正确的。
两个完全不同的值的动词如何具有相同的大小。我希望它定义了这个问题。
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="treemap0" class="treemap-chart"></div>
<div id="treemap1" class="treemap-chart"></div>
CSS
.treemap-chart{
float: left; width: 50%; text-align:center;
脚本
Highcharts.chart('treemap0', {
chart: {
height: (20 / 10 * 100) + '%'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '0px',
fontWeight: 'bold'
}
}
}],
data: [
{id: "cat_apply", sortIndex: 0, color: "#666970"},
{name: "apply", id: "apply", parent: "cat_apply", value: 50},
{name: "calculate", id: "calculate", parent: "cat_apply", value: 16},
{name: "demonstrate", id: "demonstrate", parent: "cat_apply", value: 36},
{name: "work", id: "work", parent: "cat_apply", value: 8},
{name: "draw", id: "draw", parent: "cat_apply", value: 4},
{name: "solve", id: "solve", parent: "cat_apply", value: 10},
{name: "determine", id: "determine", parent: "cat_apply", value: 16},
{name: "use", id: "use", parent: "cat_apply", value: 42},
{name: "handle", id: "handle", parent: "cat_apply", value: 2},
{name: "construct", id: "construct", parent: "cat_apply", value: 4},
{name: "utilize", id: "utilize", parent: "cat_apply", value: 2},
{name: "conduct", id: "conduct", parent: "cat_apply", value: 2},
{name: "perform", id: "perform", parent: "cat_apply", value: 4},
{name: "show", id: "show", parent: "cat_apply", value: 2},
{id: "cat_create", sortIndex: 1, color: "#7f828a"},
{name: "formulate", id: "formulate", parent: "cat_create", value: 22},
{name: "develop", id: "develop", parent: "cat_create", value: 20},
{name: "collect", id: "collect", parent: "cat_create", value: 6},
{name: "write", id: "write", parent: "cat_create", value: 16},
{name: "document", id: "document", parent: "cat_create", value: 6},
{name: "manage", id: "manage", parent: "cat_create", value: 2},
{name: "design", id: "design", parent: "cat_create", value: 14},
{name: "create", id: "create", parent: "cat_create", value: 6},
{name: "deliver", id: "deliver", parent: "cat_create", value: 6},
{name: "synthesize", id: "synthesize", parent: "cat_create", value: 10},
{name: "implement", id: "implement", parent: "cat_create", value: 2},
{name: "establish", id: "establish", parent: "cat_create", value: 2},
{name: "communicate", id: "communicate", parent: "cat_create", value: 2},
{name: "make", id: "make", parent: "cat_create", value: 2},
{id: "cat_understand", sortIndex: 2, color: "#31446b"},
{name: "summarize", id: "summarize", parent: "cat_understand", value: 4},
{name: "explain", id: "explain", parent: "cat_understand", value: 16},
{name: "describe", id: "describe", parent: "cat_understand", value: 24},
{name: "acquire", id: "acquire", parent: "cat_understand", value: 2},
{name: "recognize", id: "recognize", parent: "cat_understand", value: 10},
{name: "understand", id: "understand", parent: "cat_understand", value: 14},
{id: "cat_remember", sortIndex: 3, color: "#00204d"},
{name: "identify", id: "identify", parent: "cat_remember", value: 30},
{name: "choose", id: "choose", parent: "cat_remember", value: 4},
{name: "state", id: "state", parent: "cat_remember", value: 2},
{name: "specify", id: "specify", parent: "cat_remember", value: 2},
{name: "select", id: "select", parent: "cat_remember", value: 4},
{name: "define", id: "define", parent: "cat_remember", value: 2},
{id: "cat_analyze", sortIndex: 4, color: "#958f78"},
{name: "analyze", id: "analyze", parent: "cat_analyze", value: 26},
{name: "investigate", id: "investigate", parent: "cat_analyze", value: 4},
{name: "integrate", id: "integrate", parent: "cat_analyze", value: 2},
{name: "simulate", id: "simulate", parent: "cat_analyze", value: 2},
{id: "cat_evaluate", sortIndex: 5, color: "#cbba69"},
{name: "assess", id: "assess", parent: "cat_evaluate", value: 2},
{name: "rate", id: "rate", parent: "cat_evaluate", value: 2},
{name: "evaluate", id: "evaluate", parent: "cat_evaluate", value: 2},
{name: "verify", id: "verify", parent: "cat_evaluate", value: 2},
]
}],
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
var chart2 = $('#treemap1').highcharts();
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) {
var chart2 = $('#treemap1').highcharts();
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('')
}
}
}
}
}
}
},
title: {
text: 'Treemap 1'
}
});
Highcharts.chart('treemap1', {
chart: {
height: (20 / 10 * 100) + '%'
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '0px',
fontWeight: 'bold'
}
}
}],
data: [
{id: "cat_apply", sortIndex: 0, color: "#666970"},
{name: "apply", id: "apply", parent: "cat_apply", value: 25},
{name: "calculate", id: "calculate", parent: "cat_apply", value: 8},
{name: "demonstrate", id: "demonstrate", parent: "cat_apply", value: 18},
{name: "work", id: "work", parent: "cat_apply", value: 4},
{name: "draw", id: "draw", parent: "cat_apply", value: 2},
{name: "solve", id: "solve", parent: "cat_apply", value: 2},
{name: "determine", id: "determine", parent: "cat_apply", value: 6},
{name: "use", id: "use", parent: "cat_apply", value: 15},
{name: "handle", id: "handle", parent: "cat_apply", value: 1},
{name: "construct", id: "construct", parent: "cat_apply", value: 2},
{name: "utilize", id: "utilize", parent: "cat_apply", value: 1},
{name: "conduct", id: "conduct", parent: "cat_apply", value: 1},
{id: "cat_create", sortIndex: 1, color: "#7f828a"},
{name: "formulate", id: "formulate", parent: "cat_create", value: 10},
{name: "develop", id: "develop", parent: "cat_create", value: 10},
{name: "collect", id: "collect", parent: "cat_create", value: 3},
{name: "write", id: "write", parent: "cat_create", value: 8},
{name: "document", id: "document", parent: "cat_create", value: 3},
{name: "manage", id: "manage", parent: "cat_create", value: 1},
{name: "design", id: "design", parent: "cat_create", value: 6},
{name: "create", id: "create", parent: "cat_create", value: 3},
{name: "deliver", id: "deliver", parent: "cat_create", value: 3},
{name: "synthesize", id: "synthesize", parent: "cat_create", value: 5},
{name: "implement", id: "implement", parent: "cat_create", value: 1},
{name: "establish", id: "establish", parent: "cat_create", value: 1},
{name: "communicate", id: "communicate", parent: "cat_create", value: 1},
{id: "cat_understand", sortIndex: 2, color: "#31446b"},
{name: "summarize", id: "summarize", parent: "cat_understand", value: 2},
{name: "explain", id: "explain", parent: "cat_understand", value: 8},
{name: "describe", id: "describe", parent: "cat_understand", value: 12},
{name: "acquire", id: "acquire", parent: "cat_understand", value: 1},
{name: "recognize", id: "recognize", parent: "cat_understand", value: 5},
{name: "understand", id: "understand", parent: "cat_understand", value: 7},
{id: "cat_remember", sortIndex: 3, color: "#00204d"},
{name: "identify", id: "identify", parent: "cat_remember", value: 15},
{name: "choose", id: "choose", parent: "cat_remember", value: 2},
{name: "state", id: "state", parent: "cat_remember", value: 1},
{name: "specify", id: "specify", parent: "cat_remember", value: 1},
{name: "select", id: "select", parent: "cat_remember", value: 2},
{name: "define", id: "define", parent: "cat_remember", value: 1},
{id: "cat_analyze", sortIndex: 4, color: "#958f78"},
{name: "analyze", id: "analyze", parent: "cat_analyze", value: 10},
{name: "investigate", id: "investigate", parent: "cat_analyze", value: 2},
{name: "integrate", id: "integrate", parent: "cat_analyze", value: 1},
{name: "simulate", id: "simulate", parent: "cat_analyze", value: 1},
{id: "cat_evaluate", sortIndex: 5, color: "#cbba69"},
{name: "assess", id: "assess", parent: "cat_evaluate", value: 1},
{name: "rate", id: "rate", parent: "cat_evaluate", value: 1},
{name: "evaluate", id: "evaluate", parent: "cat_evaluate", value: 1},
]
}],
plotOptions: {
series: {
point: {
events: {
mouseOver: function(event) {
var chart2 = $('#treemap0').highcharts();
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) {
var chart2 = $('#treemap0').highcharts();
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('')
}
}
}
}
}
}
},
title: {
text: 'Treemap 2'
}
});
参见jsfiddle
答案 0 :(得分：0)
请参阅此实时演示：https://jsfiddle.net/BlackLabel/d43w28wa/
我使用点的总值计算了两个图表的“实际”尺寸比率：
var ratio = chart1.series[0].tree.childrenTotal / chart0.series[0].tree.childrenTotal;
在 treemap 中，两个轴的最小极限为0，最大值为100.如果我们只缩放一个维度（在这种情况下为x）以达到预期的效果就足够了：
chart1.xAxis[0].setExtremes(0, 100 / ratio);
在我的浏览器中，第二张图表中 Apply 矩形的区域是第一张图表中相应矩形的~0.4932大小 - 它非常接近0.5（25/50）。
API参考： https://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes