Latest web development tutorials

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

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


Параметры конфигурации (атрибуты + Event)

  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: диаграмма х, у оси на бирже.

  8. chart.polar: будь полярной диаграммы.

  9. chart.reflow: при изменении размера окна, ширина изменения размера окна графика адаптивными.

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

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

  12. chart.type: тип диаграммы, линии по умолчанию, есть бар / колонки / пирог ......

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

  14. chart.zoomType: тип амплификации данные в таблице отчета, вы можете приблизить к оси Х или Y-оси масштабирования можно увеличить XY осям одновременно.

  15. Цвета: Большинство столбцов в таблице, число столбцов между каждым цветом. Является ли массив, как правило, не двигаются.

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

  17. credits.href: ссылка защищена авторским правом.

  18. credits.text: информация об авторских правах отображения текста.

  19. экспортирующие .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. exporing.width: по умолчанию ширина экспорта изображения.

  29. этикетки: этикетки могут быть загружены в любое положение графика, есть элементы, стиль.

  30. Ланг: конфигурация параметров языка и конфигурации, связанные с меню кнопки экспорта, название и другое время конфигурации.

  31. legend.enabled: разрешить ли Legend.

  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: диаграмма данных, легенда пункта событий нажата, прямое назначение ложным, оно не кликабельны.

  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: Event удалены используются точки диаграммы.

  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 же относится и к другой области диаграмм классов (arearange, areaspline, areasplinerange), другие гистограммы (бар, колонка) и всех графиков.

  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: это значение в стек, стек или в процентах (нормальный / процент).

  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. Серия: массив.

  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: х значение точки.

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

  82. series.name: имя последовательности данных.

  83. series.stack: индекс группы сложены.

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

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

  86. субтитров: Настройка субтитров диаграммы.

  87. Название: название конфигурации диаграммы.

  88. Подсказка: Настройка данных пузырь строки в таблице.

  89. tooltip.valueDecimals: Разрешить знаков после запятой.

  90. tooltip.percentageDecimals: Разрешить процент знаков после запятой.

  91. Параметры конфигурации оси Xaxis, YAxis

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

  93. Категории: массив осей классификации.

  94. сюжетные: Нарисуйте основную линию.

  95. tickColor: цветовая гамма.

  96. tickInterval: шаг значения шкалы.

  97. labels.rotation: масштаб этикетки степень вращения

Диаграмма: вариант области диаграммы

Диаграмма области диаграммы вариант области диаграммы используется для установки свойств.

параметры описание дефолт
BackgroundColor Настройка области диаграммы цвет фона #FFFFFF
BorderWidth Установите ширину диаграммы границы 0
borderRadius Установка границы, закругленные углы 5
renderTo Диаграмма размещения контейнеров, как правило, размещены в DIV HTML, получить значение атрибута ID DIV нуль
defaultSeriesType Тип диаграммы по умолчанию линия, сплайн, область, areaspline, колонка, бар, пирог, разброс 0
ширина Ширина диаграммы, в соответствии с таблицей контейнера шириной по умолчанию адаптивным нуль
высота Высота диаграмма, диаграмма по умолчанию Контейнер в соответствии с высокой адаптивностью нуль
маржа И другие элементы в массиве диаграммы основного тона, такие как [0,0,0,0] [Null]
plotBackgroundColor Цвет фона основная область диаграммы цвет фона, осям Х и Y из замкнутого пространства нуль
plotBorderColor Цвет пограничного района граничит с основным графиком осям Х и Y в замкнутом пространстве нуль
plotBorderWidth Ширина основной границы области диаграммы 0
тень Тень установлен, вам необходимо установить цвет фона BackgroundColor. ложный
оплавления Независимо от того, используя область диаграммы от высоты и ширины, если не установлена ​​ширина и высота, размер будет адаптивным. правда
zoomType Перетащите мышь, чтобы изменить масштаб изображения, масштабирование вдоль оси х или оси у, может быть установлен на: 'X', 'Y', 'ху' ''
события Событие обратного вызова метод поддержки addSeries, выберите метод, метод загрузки, метод выбора функции обратного вызова.

Цвет: Варианты цвета

Варианты цвета для настройки диаграммы цвета цветовой схемы.

параметры описание дефолт
цвет Для получения цветного дисплея, массив графиков, линии / бар / круговой диаграммы так далее. массив

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

Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Название: Название Опции

Название опции заголовок используется для установки соответствующих свойств заголовка графика.

параметры описание дефолт
текст Текст заголовка. название диаграммы
выравнивать Горизонтальное выравнивание. центр
VerticalAlign Вертикальное выравнивание. топ
маржа Между главным заголовком и подзаголовком или диаграммы диапазона основного тона. 15
плавающий Будь плавающей, если это правда, название может быть смещена от основной области диаграммы, с х, у атрибута. ложный
стиль Набор стилей CSS. {Цвет: '# 3E576F',
FontSize: '16px'}

Варианты субтитров: Субтитры

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


Xaxis: Опция оси Х

Опция оси X используется для установки на графике по оси Х, связанные свойства.

параметры описание дефолт
категории Установить имена осей X категории, массивы, например: Категории: [ 'Яблоки', 'Bananas', 'Апельсины'] []
название Имя оси X, поддержка текста, включена, выравнивание, вращение, стиль и другие атрибуты
этикетки Установите ось X каждой категории имя стиля стиль, формат форматировщик, угол поворота и тому подобное. массив
Макс Ось Х максимальное значение (категории пусто), если оно равно нулю, то максимальное значение будет автоматически соответствовать данным по оси Х до максимума. нуль
мин Ось Х минимальная (категории пуст), если оно равно нулю, то минимальное значение будет автоматически соответствовать данным по оси Х до минимума. массив
gridLineColor Сетка (вертикальная) Цвет # C0C0C0
gridLineWidth Сетка (вертикальная полоса) ширина 1
Linecolor Базовый цвет # C0D0E0
LineWidth Ширина базовой линии 0

YAxis: Y опция оси

Опция Y-ось согласуется с вышеупомянутыми вариантами Xaxis, пожалуйста, обратитесь к таблице в параметре настройки больше не указаны отдельно.


Серия: Данные настройки колонки

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

параметры описание дефолт
данные Отображается в столбце данных диаграммы, которая может быть массивом или JSON, отформатированные данные. Такие, как: данные: [0, 5, 3, 5], или
данные: [{имя: 'Точка 1', у: 0}, {имя: 'Точка 2', у: 5}]
''
имя Отображает имя столбца данных. ''
тип типы данных столбцов, область поддержки, areaspline, бар, колонка, линия, пирог, рассеивают или сплайн линия

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

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

параметры описание дефолт
включен Данные отображаются непосредственно на точках данных ложный
allowPointSelect Независимо от того, чтобы разрешить использование мыши для выбора точек данных ложный
форматировщик Обратный вызов функции, формат отображения данных форматировщик: функция () {вернуть this.y;}

Tooltip: точки на воздушном шаре данных

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

параметры описание дефолт
включен Независимо от того, чтобы отобразить Контекстное меню правда
BackgroundColor Установите цвет фона воздушный шар RGBA (255, 255, 255, .85)
BorderColor Balloon цвет границы, столбец данных по умолчанию автоматически соответствовать цвету автоматический
borderRadius Воздушный шар круглый угол 5
тень Независимо от того, чтобы отобразить тени Контекстное правда
стиль Настройка стилей контента на воздушном шаре, такие как цвет шрифта и т.д. цвет: '# 333'
форматировщик Обратный вызов функции для форматирования вывода дисплея воздушного шара. Назад Содержание поддержки, такие как HTML-теги: <B>, <сильный>, <я>, <EM>, <br/>, <SPAN> 2

Условные обозначения: Условные обозначения Опция

легенда легенда используется для установки свойств.

параметры описание дефолт
макет Формат дисплея, вертикальный вертикальный и горизонтальный уровень поддержки горизонтальный
выравнивать Выравнивание. центр
BackgroundColor Легенда цвет фона. нуль
BorderColor Легенда цвет границы. # 909090
borderRadius угол границы Легенда 5
включен Независимо от того, чтобы отобразить условные обозначения правда
плавающий Я могу плавать, с х, у свойства. ложный
тень Независимо от того, чтобы отобразить тени ложный
стиль Содержание стиля легенды ''

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