TablePress Extension: Chartist
Используя Chartist.js, это расширение TablePress создает адаптивную диаграмму на основе данных в таблице TablePress. Используйте Добавить шорткод [table-chart id = 123 /] в сообщение или страницу, чтобы создать диаграмму из таблицы 123 TablePress. Необязательные параметры: Показать / скрыть строку диаграммы: showline = true (по умолчанию: true) Показать / скрыть показать диаграмму area: showarea = false (по умолчанию: false) Установить диаграмму y low: low = 0 (по умолчанию: table low) Установить диаграмму y high: high = 10 (по умолчанию: table high) Установить линию с кольцевой диаграммы: donut_width = 200 ( по умолчанию: false) Включение / отключение плавной линии: linesmooth = true (по умолчанию: true) Включение / отключение точек линии: showpoint = true (по умолчанию: true) Включение / отключение горизонтальных полос: horizontal = true (по умолчанию: false) Включение / отключение наложения bars: stack = true (по умолчанию: false) Установить соотношение сторон диаграммы: aspect_ratio = 3: 4 (по умолчанию: 3: 4) Альтернативы: 1, 15:16, 8: 9, 5: 6, 4: 5, 3: 4 , 2: 3, 5: 8, 1: 1.618, 3: 5, 9:16, 8:15, 1: 2, 2: 5, 3: 8, 1: 3 или 1: 4 Выберите тип диаграммы: диаграмма = полоса (по умолчанию: линия) Альтернативы: линия, полоса, круговая диаграмма, пончик, процент или круговой процент (сочетание круговой диаграммы и процента). Установить смещение метки: label_offset = 100 (по умолчанию: false) Установить заполнение диаграммы: chart_padding = 100 (по умолчанию: false) Использовать анимацию (доступно не для всех типов диаграмм): animation = buildup (по умолчанию: false) Если параметр «Table Head Row» опция включена для таблицы, расширение будет использовать данные заголовка строки для подписей диаграммы. Остальные строки будут показаны в виде линий или полос. Круговые диаграммы или диаграммы процентов будут использовать только первую строку данных. Диаграммы процентов игнорируют строку заголовка. Настройки CSS Если вы хотите изменить стиль по умолчанию, вы можете добавить tablepress-chartist-custom.css в каталог wp-content. Он будет загружен после файла CSS по умолчанию для расширения libdist / chartist.min.css. Пример: / ** * CSS-свойства SVG Shape: http://tutorials.jenkov.com/svg/svg-and-css.html#shape-css-properties * / / * Первая строка / полоса - это .ct-series- a, далее идет .ct-series-b и т. д. * / .ct-chart .ct-series.ct-series-a .ct-bar, .ct-chart .ct-series.ct-series-a .ct- линия, .ct-диаграмма .ct-series.ct-series-a .ct-point {stroke: # 073DA0; } .ct-series .ct-line, .ct-chart .ct-bar {fill: none; ширина штриха: 10 пикселей; } .ct-диаграмма .ct-точка {ширина обводки: 10 пикселей; штрих-колпачок: круглый; }
Автор: Silsha Fux
Версия: 0.9
Последнее обновление: 2017-11-27 6:41pm GMT