Подробное объяснение параметров конфигурации Highcharts

Highcharts предоставляет большое количество параметров конфигурации, позволяя легко настраивать диаграммы в соответствии с требованиями пользователя. В этой главе подробно описаны инструкции по использованию параметров конфигурации Highcharts.

Конфигурация параметров (Атрибуты + События)

  1. chart.events.addSeries: Добавить серию на диаграмму.

  2. chart.events.click: Событие клика, возникающее в области построения всей диаграммы.

  3. chart.events.load: Событие загрузки диаграммы.

  4. chart.events.redraw: Событие перерисовки диаграммы, которое может срабатывать при щелчке по легенде для отображения или скрытия графиков.

  5. chart.events.selection: Когда кривая диаграммы может быть выбрана для масштабирования, это событие может срабатывать при выполнении операции выбора на диаграмме.

  6. chart.height: Значение высоты отображаемой диаграммы.

  7. chart.inverted: Поменять местами оси x и y на диаграмме.

  8. chart.polar: Является ли диаграмма полярной.

  9. chart.reflow: При изменении размера окна ширина диаграммы адаптируется к изменению размера окна.

  10. chart.renderTo: Место, где загружается диаграмма, которое является DOM-объектом на странице.

  11. chart.showAxes: Отображать ли оси на пустой диаграмме.

  12. chart.type: Тип диаграммы, по умолчанию line, а также включаетbar/column/pie……

  13. chart.width: Ширина области построения диаграммы, по умолчанию автоадаптивная.

  14. chart.zoomType: Тип масштабирования для отчетов данных на диаграмме. Можно масштабировать по оси X, или по оси Y, или одновременно по обеим осям XY.

  15. colors: Когда на диаграмме есть несколько серий, цвета для каждой серии данных. Это массив, обычно оставляемый без изменений.

  16. credits.enabled: Разрешать ли отображение информации об авторских правах.

  17. credits.href: Ссылка для авторских прав.

  18. credits.text: Текст, отображаемый для информации об авторских правах.

  19. exporting.buttons.exportButton.enabled: Разрешать ли отображение кнопки экспорта.

  20. exporting.buttons.exportButton.menuItems: Пункты меню кнопки экспорта.

  21. exporting.buttons.exportButton.onclick: Событие при нажатии кнопки экспорта, а не внутреннего меню.

  22. exporting.buttons.printButton.enabled: Разрешить ли использование кнопки печати.

  23. exporting.buttons.printButton.onclick: Событие нажатия кнопки печати.

  24. exporting.enabled: Включены ли кнопки печати и экспорта.

  25. exporting.filename: Имя экспортируемого файла.

  26. exporting.type: Формат файла изображения, экспортируемого по умолчанию.

  27. exporting.url: Адрес интерфейса обработки для преобразования и экспорта SVG-диаграмм.

  28. exporting.width: Ширина экспортируемого изображения по умолчанию. (Примечание: в исходном тексте была опечатка "exporing.width")

  29. lang: Конфигурация языковых параметров, включая настройки, связанные с меню кнопки экспорта, настройки названий времени и т. д.Labels: Can be loaded at any position in the chart, containing items and style.

  30. labels

  31. legend.enabled: Включать ли легенду.

  32. navigation.buttonOptions.enabled: Можно ли нажимать кнопки во всех элементах навигации диаграммы.

  33. plotOptions.area.allowPointSelect: Разрешать ли щелчок по точкам данных.

  34. plotOptions.area.color: Цвет графика.

  35. plotOptions.area.dataLabels.enabled: Разрешать ли подписи данных.

  36. plotOptions.area.enableMouseTracking: Разрешать ли всплывающее отображение отслеживания мыши для точек данных на диаграмме данных.

  37. plotOptions.area.events.checkboxClick: Событие щелчка по флажку в легенде на диаграмме данных.

  38. plotOptions.area.events.click: Событие щелчка по точкам данных на диаграмме данных.

  39. plotOptions.area.events.hide: Событие при скрытии серии данных на диаграмме данных.

  40. plotOptions.area.events.show: Событие при отображении серии данных на диаграмме данных.

  41. plotOptions.area.events.legendItemClick: Событие при щелчке по элементу легенды на диаграмме данных. Если напрямую присвоено false, по нему нельзя щелкнуть.

  42. plotOptions.area.events.mouseOut: Событие выхода курсора мыши для точек данных.

  43. plotOptions.area.events.mouseOver: Событие наведения курсора мыши для точек данных.

  44. plotOptions.area.marker.enabled: Отображать ли маркеры точек в области построения диаграммы.

  45. plotOptions.area.marker.states.hover.enabled: Определяет, разрешать ли состояние наведения для маркеров.

  46. plotOptions.area.marker.states.select.enabled: Определяет, разрешать ли состояние выбора для маркеров.

  47. plotOptions.area.point.events.click: Событие щелчка для каждой отдельной точки на диаграмме.

  48. plotOptions.area.point.events.mouseOut

  49. plotOptions.area.point.events..mouseOver

  50. plotOptions.area.point.events.remove: Событие при удалении точки с диаграммы.

  51. plotOptions.area.point.events.select: Событие выбора точки на диаграмме.

  52. plotOptions.area.point.events.unselect: Событие при отмене выбора точки на диаграмме.

  53. plotOptions.area.point.events.update: Событие, возникающее при обновлении данных на диаграмме.

  54. plotOptions.area.visible: Определяет, показывается или скрывается серия данных по умолчанию при загрузке.

  55. plotOptions.area.zIndex: В случае нескольких серий регулирует порядок наложения каждой серии.

  56. Описанные выше point.events также применяются к другим диаграммам, подобным area (arearange, areaspline, areasplinerange), другим столбчатым диаграммам (bar, column) и всем диаграммам.

  57. plotOptions.area.showInLegend: Отображать ли в легенде.

  58. plotOptions.area.stacking: Складывать по значению или по проценту.

  59. plotOptions.area.states.hover.enabled: Разрешено ли состояние при наведении.

  60. plotOptions.area.stickyTracking: Закреплённое отслеживание точек данных мышью.

  61. plotOptions.arearange, plotOptions.areaspline, plotOptions.areasplinerange аналогичны plotOptions.area.

  62. plotOptions.bar.groupPadding: Интервал между каждой группой при группировке на столбчатой диаграмме.

  63. plotOptions.bar.grouping: Группировать ли данные.

  64. plotOptions.bar.minPointLength: Задаёт минимальную длину точки, когда её значение равно нулю.

  65. plotOptions.bar.showInLegend: Отображать ли в легенде.

  66. plotOptions.bar.stacking: Складывать по значению или по проценту (normal/percent).

  67. plotOptions.column и plotOptions.columnrange аналогичны plotOptions.bar.

  68. Конфигурация plotOptions.line аналогична конфигурации plotOptions.area.

  69. plotOptions.pie.ignoreHiddenPoint: В круговой диаграмме после скрытия серии щелчком по легенде: будет ли вся круговая диаграмма перераспределена на 100% или скрытая часть просто скрывается на основе исходной диаграммы, оставляя пустое место.

  70. plotOptions.pie.innerSize: Сколько пустого пространства резервируется в центре круговой диаграммы при её отрисовке.

  71. plotOptions.pie.slicedOffset: Используется вместе с allowPointSelect. При щелчке по точке соответствующий сектор отделяется. Этот параметр задаёт расстояние смещения.

  72. Другие общие параметры конфигурации plotOptions.pie аналогичны plotOptions.area; соответствующие конфигурации plotOptions.scatter, plotOptions.series и plotOptions.spline аналогичны конфигурации plotOptions.area.

  73. series: является массивом.

  74. series.data.color: Цвет конкретной точки данных.

  75. series.data.dataLabels: Метка данных конкретной точки данных в серии.

  76. series.data.events аналогичен конфигурации plotOptions.area.point.events.

  77. series.data.marker аналогичен конфигурации plotOptions.area.marker.

  78. series.data.name: Задаёт имя точки данных.

  79. series.data.sliced: Задаёт расстояние отделения секторов в круговой диаграмме.

  80. series.data.x: значение x точки.

  81. series.data.y: значение y точки.

  82. series.name: Имя серии данных.

  83. series.stack: Индекс группировки для стекирования.

  84. series.type: Тип отображения серии данных.

  85. series.xAxis, series.yAxis: при использовании нескольких осей указывает, какой оси соответствует серия данных.

  86. subtitle: Настройка подзаголовка диаграммы.

  87. title: Настройка заголовка диаграммы.

  88. tooltip: Настройка всплывающей подсказки для данных на диаграмме.

  89. tooltip.valueDecimals: Количество допустимых десятичных знаков.

  90. tooltip.percentageDecimals: Количество допустимых десятичных знаков для процентов.

  91. xAxis, конфигурация yAxis задаёт ось

  92. allowDecimals: Разрешены ли десятичные числа на оси.

  93. categories: Массив, содержащий категории оси.

  94. plotLines: Рисовать основные линии.

  95. tickColor: Цвет делений.

  96. tickInterval: Значение шага для делений.

  97. labels.rotation: Угол поворота подписей делений.

Chart: Параметры области диаграммы

Параметры области диаграммы Chart используются для задания свойств, связанных с областью диаграммы.

Параметр Описание Значение по умолчанию
backgroundColor Задать цвет фона области диаграммы #FFFFFF
borderWidth Задать ширину границы диаграммы 0
borderRadius Задать радиус скругления углов границы диаграммы 5
renderTo Контейнер, в котором размещается диаграмма. Обычно в HTML размещается DIV, и получается значение атрибута id этого DIV. null
defaultSeriesType Типы диаграмм по умолчанию: line, spline, area, areaspline, column, bar, pie, scatter. 0
width Ширина диаграммы, которая по умолчанию адаптируется к ширине контейнера диаграммы. null
height Высота диаграммы, которая по умолчанию адаптируется к высоте контейнера диаграммы. null
margin Задает отступ между диаграммой и другими элементами; массив, например [0,0,0,0]. [null]
plotBackgroundColor Цвет фона основной области диаграммы, то есть цвет фона области, ограниченной осями X и Y. null
plotBorderColor Цвет границы основной области диаграммы, то есть цвет границы области, ограниченной осями X и Y. null
plotBorderWidth Граница основной области диаграммы 0
shadow Задавать ли тень; необходимо задать backgroundColor. false
reflow Автоматически адаптировать высоту и ширину области диаграммы. Если width и height не заданы, она подстроится под размер. истина
zoomType Перетащите мышь для масштабирования вдоль оси x или y; можно задать: 'x', 'y', 'xy'. ''
events Обратные вызовы событий, поддерживающие функции обратного вызова для метода addSeries, метода click, метода load, метода selection и т. д.  

Color: параметры цвета

Опция Color используется для настройки цветовой схемы диаграммы.

Параметр Описание Значение по умолчанию
color Используется для отображения цветов диаграмм (линейных, столбчатых, круговых) в виде массива. array

Highcharts уже предоставляет несколько цветовых схем по умолчанию. Когда количество отображаемых графиков превышает количество цветов, дополнительные графики автоматически начнут выбираться с первой цветовой схемы. Способ настройки цветовых схем:

Highcharts.setOptions({
    colors: ['#058DC7', '#3273B4', '#ED561B', '#DDDF00', '#24CBE5', '#64A4E5', '#FF9655',
'#FFF263', '#6AB2F9']
});

Title: Параметры заголовка

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

Параметр Описание Значение по умолчанию
text Текстовое содержимое заголовка. Заголовок диаграммы
align Режим горизонтального выравнивания. center
verticalAlign Режим вертикального выравнивания. top
margin Расстояние между заголовком и подзаголовком или расстояние до основной области диаграммы. 15
floating Определяет, следует ли использовать плавающее положение. Если true, заголовок может выходить за пределы основной области диаграммы, что можно использовать с атрибутами x и y. false
style Задать стили CSS. {color: '#3E576F',
fontSize: '16px'}

Subtitle: параметры подзаголовка

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

xAxis: параметры оси X.

Параметры оси X используются для настройки свойств диаграммы, связанных с осью X.

Параметр Описание Значение по умолчанию
categories Задаёт имена категорий оси X, массив, например: categories: ['Apples', 'Bananas', 'Oranges'] []
title Имя оси X, поддерживает такие атрибуты, как text, enabled, align, rotation, style и т. д.  
labels Задаёт стиль каждого имени категории на оси X, например style, formatter, rotation и т. д. array
max Максимальное значение оси X (когда categories пуст). Если null, максимальное значение будет автоматически подобрано на основе данных оси X. null
min Минимальное значение оси X (когда categories пуст). Если null, минимальное значение будет автоматически подобрано на основе данных оси X. array
gridLineColor Цвет сетки (вертикальной линии) #C0C0C0
gridLineWidth Ширина сетки (вертикальной линии) 1
lineColor Цвет базовой линии #C0D0E0
lineWidth Ширина базовой линии 0

yAxis: параметры оси Y.

Параметры оси Y в основном совпадают с параметрами xAxis выше. Обратитесь к настройкам параметров в таблице выше; они не перечислены отдельно.

Серии: Параметры серий данных

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

Параметр Описание Значение по умолчанию
data Серии данных, отображаемые на диаграмме, могут быть в формате массива или JSON. Например: data:[0, 5, 3, 5], или
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]		 ''
name Отображать название серии данных. ''
type Тип серии данных, поддерживает area, areaspline, bar, column, line, pie, scatter или spline line

plotOptions: Параметры для точек данных.

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

Параметр Описание Значение по умолчанию
включено Отображать ли данные непосредственно на точках данных false
allowPointSelect Разрешать ли выбор точек данных с помощью мыши false
formatter Функция обратного вызова для форматирования отображаемого содержимого данных formatter: function() {return this.y;}

Tooltip: Всплывающая подсказка точки данных

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

Параметр Описание Значение по умолчанию
включено Показывать всплывающую подсказку. истина
backgroundColor Установить цвет фона всплывающей подсказки rgba(255, 255, 255, .85)
borderColor Цвет границы всплывающей подсказки, который по умолчанию автоматически совпадает с цветом серии данных. auto
borderRadius Радиус скругления углов всплывающей подсказки. 5
shadow Показывать ли тень всплывающей подсказки истина
style Задаёт стиль содержимого всплывающей подсказки, например, цвет шрифта и т. д. color:'#333'
formatter Функция обратного вызова, используемая для форматирования отображаемого содержимого всплывающей подсказки. Возвращаемое содержимое поддерживает HTML-теги, такие как: <b>, <strong>, <i>, <em>, <br/>, <span>. 2

Легенда: параметры легенды

legend используется для настройки свойств, связанных с легендой.

Параметр Описание Значение по умолчанию
layout Форма отображения, поддерживающая горизонтальное и вертикальное расположение. horizontal
align Выравнивание. center
backgroundColor Цвет фона легенды. null
borderColor Цвет границы легенды. #909090
borderRadius Радиус скругления границы легенды. 5
включено Показывать ли легенду. истина
floating Может ли она быть плавающей, используется с атрибутами x и y. false
shadow Показывать ли тень. false
style Задать стиль содержимого легенды. ''

Для получения более подробной информации обратитесь к официальной англоязычной документации Highcharts:http://api.highcharts.com/highcharts

Другие расширения