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

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

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

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

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

Проблема:

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

То, что я хочу добиться:

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

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

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

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

Вопрос:

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

источник

2016-04-16 Andreas Schuldhaus

Мне интересно, если она поддерживается тоже. Если бы вы быстро осмотрелись и видели заметку об изменении (http://www.zingchart.com/docs/changelog/) в очень старой версии, в которой упоминался атрибут выравнивания («центр» или «узел»). Похоже, что это не повлияло, так как, возможно, оно устарело. (* РЕДАКТИРОВАТЬ *): Не обращайте внимания на мелкие тики. Пропустили вашу заметку о том, что те перестают работать, когда число точек увеличивается. http://jsfiddle.net/yo3uta96/2/ * (Изменить) * – Leigh

@Leigh - Только для справки, эта страница выглядит устаревшей. Более современный журнал изменений находится здесь: http://www.zingchart.com/docs/reference/change-log/ –

@ mike-schultz - Упс, я отправил неверную ссылку :-) Спасибо за публикацию обновленного , – Leigh

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

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

var myConfig = { 
 
type: "mixed", 
 
plotarea: { 
 
\t maskTolerance: [0, 0] 
 
}, 
 
scaleX: { 
 
\t offset: 0, 
 
\t guide: { 
 
\t \t visible: true, //set to false by default on some chart types 
 
\t \t lineColor: "red", 
 
\t \t lineWidth: 1 
 
\t } 
 
}, 
 
series: [{ 
 
\t type: "bar", 
 
\t values: [35, 42, 67, 79, 25, 34, 67, 85] 
 
}, { 
 
\t 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> 
 
    \t <div id='myChart'></div> 
 
    </body> 
 

 
</html>

источник

2016-04-16 17:29:50

Большое спасибо за ваш пример кода. Работает как очарование при использовании самой последней библиотеки ZingChart. К сожалению, вы правы, когда речь идет о текущей версии ColdFusion для ZingChart. offset: 0 не оказывает никакого эффекта. –

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

ответ

Смежные вопросы