Nano Hash - криптовалюты, майнинг, программирование

Максимальная высота легенды Chart.js

Мой сценарий: я использую phantomjs для создания изображений диаграмм фиксированного размера, отображаемых с использованием chart.js. Я заметил, что когда меток слишком много, легенда начинает занимать все больше и больше доступного (фиксированного) места на экране, пока диаграмма не становится практически невидимой, как показано здесь: График Chartjs вытеснен огромной легендой Есть ли способ принудительно ограничить высоту легенды? Или установить жесткий минимум для высоты области графика? Из отладки и просмотра кода здесь: https://github.com/chartjs/Chart.js/blob/v2.6.0/src/plugins/plugin.legend.js и здесь: https://github.com/chartjs/Chart.js/blob/v2.6.0/src/core/core.layoutService.js, я не вижу ничего полезного. Надеюсь, я что-то пропустил.

Используя v2.6.0, и вот определение диаграммы JSON, которое я использую:

{
  "type": "line",
  "title": "DaTitle",
  "xLabel": "DaLabel",
  "yLabel": "DaYLabel",
  "data": {
    "labels": ["Time0", "Time1", "Time2", "Time3", "Time4", "Time5", "Time6", "Time7", "Time8", "Time9", "Time10", "Time11", "Time12", "Time13", "Time14", "Time15", "Time16", "Time17", "Time18", "Time19"],
    "datasets": [{
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [45, 19, 70, 96, 8, 44, 49, 3, 10, 75, 71, 80, 29, 44, 22, 30, 59, 67, 17, 34]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [9, 60, 19, 71, 4, 47, 14, 35, 44, 2, 92, 8, 89, 73, 98, 15, 3, 41, 81, 20]
    }, {
      "label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
      "data": [39, 73, 50, 32, 11, 17, 17, 1, 76, 76, 53, 0, 58, 41, 0, 5, 22, 38, 79, 16]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [5, 6, 2, 87, 27, 6, 40, 17, 8, 27, 24, 57, 2, 2, 13, 52, 25, 24, 49, 61]
    }, {
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [72, 73, 82, 71, 0, 37, 31, 22, 88, 63, 81, 22, 63, 54, 89, 30, 47, 49, 5, 77]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [95, 86, 96, 3, 64, 62, 47, 90, 21, 57, 14, 32, 29, 94, 29, 9, 82, 39, 79, 39]
    }, {
      "label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
      "data": [59, 56, 73, 58, 99, 61, 0, 17, 97, 89, 49, 67, 81, 49, 22, 99, 89, 30, 86, 81]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [5, 72, 51, 40, 97, 56, 40, 13, 0, 60, 65, 86, 58, 95, 67, 84, 4, 48, 37, 36]
    }, {
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [48, 80, 85, 84, 53, 65, 64, 87, 56, 0, 96, 90, 76, 36, 37, 91, 25, 37, 72, 36]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [31, 84, 1, 12, 67, 74, 27, 86, 70, 38, 44, 27, 22, 57, 67, 39, 3, 1, 26, 44]
    }, {
      "label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
      "data": [70, 66, 99, 63, 99, 26, 3, 71, 28, 91, 81, 28, 70, 46, 2, 57, 84, 51, 77, 15]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [86, 92, 58, 98, 97, 25, 32, 69, 76, 94, 71, 85, 40, 15, 58, 56, 57, 9, 98, 97]
    }, {
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [4, 93, 76, 92, 9, 35, 96, 76, 54, 61, 21, 56, 71, 18, 79, 4, 90, 42, 77, 93]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [78, 16, 40, 44, 11, 23, 93, 63, 94, 78, 57, 77, 75, 15, 63, 21, 12, 59, 56, 99]
    }, {
      "label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
      "data": [85, 24, 28, 31, 17, 8, 10, 7, 60, 89, 36, 44, 8, 99, 49, 28, 6, 50, 43, 43]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [46, 17, 73, 71, 66, 97, 84, 6, 12, 13, 38, 25, 40, 4, 36, 32, 65, 65, 3, 45]
    }, {
      "label": "RRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRRR",
      "data": [92, 43, 10, 40, 19, 34, 12, 48, 64, 89, 62, 61, 37, 25, 33, 31, 93, 83, 13, 16]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [80, 34, 77, 13, 57, 42, 6, 69, 41, 5, 47, 76, 55, 43, 24, 52, 37, 69, 92, 78]
    }, {
      "label": "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD",
      "data": [92, 62, 49, 59, 36, 15, 94, 5, 3, 13, 12, 2, 89, 14, 53, 49, 78, 36, 63, 77]
    }, {
      "label": "2222222222222222222222222222222222222222222222222222222222222222",
      "data": [79, 42, 90, 42, 75, 49, 96, 33, 53, 18, 63, 44, 27, 87, 92, 89, 30, 27, 72, 5]
    }, {
      "label": "Example",
      "data": [41, 32, 7, 16, 73, 8, 60, 63, 44, 72, 73, 53, 47, 50, 7, 48, 48, 61, 52, 1]
    }, {
      "label": "Linear",
      "data": [87, 91, 61, 80, 97, 19, 99, 93, 88, 17, 94, 79, 64, 87, 36, 75, 82, 53, 39, 84]
    }, {
      "label": "Interpolation",
      "data": [30, 77, 18, 39, 67, 10, 19, 70, 76, 72, 66, 60, 87, 37, 43, 56, 89, 22, 2, 94]
    }]
  }
}
javascript charts chart.js
17.10.2017

  • Используйте обозначения HTML. 17.10.2017
  • Возможно, это сработает, сейчас я рассматриваю очень похожий метод, используемый здесь: stackoverflow.com/questions/43229626/ Однако я очень доволен легенда в целом, и, как вы видите выше, я использую ее точечный стиль для доступности для дальтоников. Я бы не хотел переписывать все это только для того, чтобы установить максимальную высоту... 17.10.2017

Ответы:


1

Мне удалось сделать небольшой глупый хак, чтобы получить именно то, что я хотел, и это достаточно хорошо для меня, хотя это может быть слишком хакерским на вкус других людей:

Chart.Legend.prototype.afterFit = function () {
    console.log('Before afterFit: ' + JSON.stringify(this.minSize) + ' ' + this.height);
    this.minSize.height = this.height = 100;
    console.log('After afterFit: ' + JSON.stringify(this.minSize) + ' ' + this.height);
}

лог консоли такой:

Before afterFit: {"width":1664,"height":527} 527
After afterFit: {"width":1664,"height":100} 100
Before afterFit: {"width":1664,"height":527} 527
After afterFit: {"width":1664,"height":100} 100

И результат: Легенда ограничена по высоте

Я полагаю, чтобы сделать это более чисто, мне, вероятно, следует расширить Legend, чтобы переопределить ее поведение afterFit. Я посмотрю на это, и я обновлю здесь, если это возможно сделать без особых хлопот.

РЕДАКТИРОВАТЬ 19.10.2017:

Вот более «приятный» способ сделать это, который будет выглядеть для пользователя как встроенная функция:

var origAfterFit = Chart.Legend.prototype.afterFit;
Chart.Legend.prototype.afterFit = function () {
    origAfterFit.call(this);
    if (this.options && this.options.maxSize) {
        var maxSize = this.options.maxSize;
        if (maxSize.height !== undefined) {
            this.height = Math.min(this.height, maxSize.height);
            this.minSize.height = Math.min(this.minSize.height, this.height);
        }
        if (maxSize.width !== undefined) {
            this.width = Math.min(this.width, maxSize.width);
            this.minSize.width = Math.min(this.minSize.width, this.width);
        }
    }
};

И пример дескриптора диаграммы json:

{
    "type" : "line",
    "data" : {},
    "options" : {
        "legend" : {
            "position" : "bottom",
            "maxSize" : {
                "height" : 200
            },
            "labels" : {
                "usePointStyle" : true
            }
        }
    }
}
17.10.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..