Значение одного и того же элемента в одной древовидной карте неправильно отображает его размер, когда мы сравниваем его с элементом в другой древовидной карте - PullRequest
Новая
       28

Значение одного и того же элемента в одной древовидной карте неправильно отображает его размер, когда мы сравниваем его с элементом в другой древовидной карте

0 голосов
/ 10 мая 2018

Например, у меня есть две древовидные карты, обе представляют одни и те же данные, но разных сущностей. Я использую эти параллельные древовидные карты для сравнения.

В «Treemap 1» у меня есть глагол «Применить», который имеет вес 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

https://jsfiddle.net/asma123/wpuj9gtL/

1 Ответ

0 голосов
/ 14 мая 2018

См. Эту живую демонстрацию : https://jsfiddle.net/BlackLabel/d43w28wa/

Я вычислил соотношение «реальных» размеров обеих диаграмм, используя общие значения их точек: 

var ratio = chart1.series[0].tree.childrenTotal / chart0.series[0].tree.childrenTotal;

В древовидная карта минимальная крайность обеих осей равна 0, а максимальная равна 100. Для достижения желаемого эффекта достаточно масштабировать только одно измерение (в данном случае x): 

chart1.xAxis[0].setExtremes(0, 100 / ratio);

В моем браузере область Применить прямоугольник на втором графике составляет ~ 0,4932 размера соответствующего прямоугольника на первом графике - это очень близко к 0,5 (25/50).

Справочник по API: https://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes

...