Как выровнять вертикальные направляющие между линейной и гистограммой в ZingChart?

С обновлением ColdFusion 9 до ColdFusion 11 базовый механизм построения диаграмм был изменен с WebCharts3D на ZingCharts. Хотя мне удалось найти решения для большинства несовместимостей между двумя библиотеками и их реализацией в теге <cfchart>, я изо всех сил пытаюсь решить проблему с выравниванием, которой не было в ColdFusion 9. Я даже не нашел исправления. пробовать чистый javascript и HTML.

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

В ZingCharts направляющие и отметки комбинированного графика или столбчатой ​​диаграммы располагаются слева от столбца и не проходят через маркеры линии. Это другое поведение, чем в линейных диаграммах. Метки оси X идеально центрированы в обоих двигателях, тем не менее.

Вы можете увидеть пример здесь: http://jsfiddle.net/yo3uta96/

Проблема:

У меня есть непубличные страницы со статистическими данными о погоде, показывающими дождь, ветер, температуру и т. Д., Которые представлены в нескольких диаграммах, расположенных одна под другой. Некоторые из них являются линейными диаграммами, некоторые - гистограммами, а некоторые - комбинированными. Это динамически созданная страница, на которой пользователи могут выбрать диапазон дат до 365 дней в прошлом. Каждая диаграмма на странице имеет одинаковое количество точек данных. Когда отображается более 80 точек данных, гистограммы превращаются в диаграммы с областями, а линейные диаграммы - в линейные диаграммы без маркеров.

Чего я хочу достичь:

Я хочу, чтобы диаграммы, точки данных, направляющие и отметки выстраивались так же, как и метки оси x.

Что я пробовал:

Мне удалось выровнять точки данных, добавив offsetStart и offsetEnd в линейные диаграммы, это необходимо, потому что в комбинированной диаграмме первый маркер линейной диаграммы помещается по центру соответствующей первой панели и больше не находится на оси Y как в линейных диаграммах. То же самое и с последним маркером.

К сожалению, добавление смещения не решает мою проблему с выравниванием тиков и направляющих. Я пробовал почти все возможные комбинации с направляющими, второстепенными тиками, второстепенными направляющими и смещениями, но безрезультатно. В идеальном мире и некоторых пограничных случаях, когда каждая метка оси X отображается на диаграмме, отключение направляющих и установка незначительных отметок на 1 может сработать. Но этот метод перестает работать при увеличении количества точек данных.

Вопрос:

Как я могу выровнять направляющие и отметки в гистограммах и линейных диаграммах с одинаковым количеством точек данных таким же образом, как ZingCharts обрабатывает метки оси x, которые кажутся идеально выровненными по диаграммам?


charts coldfusion zingchart coldfusion-11 cfchart
person Andreas Schuldhaus    schedule 16.04.2016    source источник
comment
Мне любопытно, поддерживается ли это тоже. Бегло осмотрелся и увидел примечание об изменении в очень старой версии, в котором упоминалось атрибут выравнивания (центр или узел). Похоже, это не повлияло на это, предполагая, что он устарел. (РЕДАКТИРОВАТЬ): Не обращайте внимания на незначительные отметки. Пропустил ваше примечание, что они перестают работать, когда точки данных увеличиваются. jsfiddle.net/yo3uta96/2 (Изменить)   -  person Leigh    schedule 16.04.2016
comment
@Leigh - Для справки, эта страница выглядит устаревшей. Более свежий журнал изменений находится здесь: zingchart.com/docs/reference/change -log   -  person mike-schultz    schedule 16.04.2016
comment
@ mike-schultz - Ой, я разместил не ту ссылку :-) Спасибо, что разместили обновленную.   -  person Leigh    schedule 16.04.2016

Ответы (1)


arrow_upward
7
arrow_downward

Я не верю, что следующее исправление будет работать в CFCharts в ColdFusion 11, поскольку оно использует версию ZingChart ~ конца 2015 года, но в ZingChart v2.2.2 было добавлено изменение, которое дает решение этой проблемы.

При установке смещения scale-x: 0 масштаб будет центрирован на узле и будет вести себя как линейная диаграмма. Обратите внимание, что для дополнительного свойства внутри plotarea, называемого «maskTolerance», необходимо установить значение [0,0]. Это гарантирует, что полосы не выходят за границы шкалы y.

var myConfig = {
type: "mixed",
plotarea: {
	maskTolerance: [0, 0]
},
scaleX: {
	offset: 0,
	guide: {
		visible: true, //set to false by default on some chart types
		lineColor: "red",
		lineWidth: 1
	}
},
series: [{
	type: "bar",
	values: [35, 42, 67, 79, 25, 34, 67, 85]
}, {
	values: [40, 27, 38, 68, 41, 49, 50, 65]
}]
};

zingchart.render({
id: 'myChart',
data: myConfig,
height: 200,
width: "100%"
});
<!DOCTYPE html>
<html>

  <head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>

  <body>
  	<div id='myChart'></div>  
  </body>

</html>

person mike-schultz    schedule 16.04.2016
comment
Большое спасибо за ваш пример кода. Прекрасно работает при использовании самой последней библиотеки ZingChart. К сожалению, вы правы, когда дело касается текущей реализации ZingChart в ColdFusion. offset: 0 вообще не показывает никакого эффекта. - person Andreas Schuldhaus; 18.04.2016