Угловая верхняя карта дерева

Question

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

Как вы можете видеть в этом jsfiddle, где у вас есть один член с 6000 в качестве значения, а другиес 6 вы можете видеть только 1 члена

Отредактировано: Я наконец-то вижу другие квадраты. Теперь вопрос: как я могу сделать эти маленькие квадраты больше, чем они есть сейчас?

Потому что люди, которые будут использовать эту таблицу, не будут различать текст. Ну, я не мог видеть это, поэтому я сделал это сообщение.

https://jsfiddle.net/unx1Larf/

Highcharts.chart('container', {
    series: [{
        type: "treemap",
        layoutAlgorithm: 'squarified',
        data: [{
            name: 'A',
            value: 6000
        }, {
            name: 'B',
            value: 6
        }, {
            name: 'C',
            value: 4
        }, {
            name: 'D',
            value: 3
        }, {
            name: 'E',
            value: 2
        }, {
            name: 'F',
            value: 2
        }, {
            name: 'G',
            value: 1
        }]
    }],
    title: {
        text: 'Highcharts Treemap'
    }
});

Answer 1

Вы можете сделать их больше, установив меньшее значение для большого квадрата и заставив всплывающую подсказку отображать реальное значение. Проверьте демо и код, указанный ниже.

Код:

Highcharts.chart('container', {
  series: [{
    type: "treemap",
    layoutAlgorithm: 'squarified',
    data: [{
      name: 'A',
      realValue: 6000,
      value: 100
    }, {
      name: 'B',
      value: 6
    }, {
      name: 'C',
      value: 4
    }, {
      name: 'D',
      value: 3
    }, {
      name: 'E',
      value: 2
    }, {
      name: 'F',
      value: 2
    }, {
      name: 'G',
      value: 1
    }]
  }],
  tooltip: {
  	formatter: function() {
    	return this.point.realValue || this.point.value;
    }
  },
  title: {
    text: 'Highcharts Treemap'
  }
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<div id="container"></div>

Демоверсия:

• https://jsfiddle.net/BlackLabel/wgevrz4m/

Ссылка API:

• https://api.highcharts.com/highcharts/tooltip.formatter