Chart.js и линк на точки

[rumstore]

Добрый день!

Имеем линейную диаграмму, на основе сабжа. (http://www.chartjs.org/docs/)

Подскажите как сделать в ней линкующие точки? А точнее чтобы при нажатии на точку появлялась краткая инфа с возможность перехода к основному тексту (наподобии спотлайта)

Заранее спасибо

[npofopr]

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

Хотя может кто то и откликнется.

[Vlad]

Есть ответвление от сборки с возможностью добавления краткой инфы.

https://github.com/Regaddi/Chart.js/tree/tooltips

Ещё рекомендую этот проект, в нём гораздо больше возможностей по созданию диаграмм.

http://chartjs.devexpress.com

[rumstore]

Ещё рекомендую этот проект, в нём гораздо больше возможностей по созданию диаграмм. http://chartjs.devexpress.com

О да! Это то что надо! Спасибо огромное!

[rumstore]

Есть ответвление от сборки с возможностью добавления краткой инфы.

https://github.com/R...s/tree/tooltips

Ещё рекомендую этот проект, в нём гораздо больше возможностей по созданию диаграмм.

http://chartjs.devexpress.com

var dataSource = [
{ date: new Date(2013, 8, 6), moderate: 0.00, aggressive: 0.00, conservative: 0.00, tag: 'test' },
	 { date: new Date(2013, 8, 11), moderate: 0.0163, aggressive: 0.0263, conservative: 0.0134, tag: 'test' },
{ date: new Date(2013, 8, 18), moderate: 0.0211, aggressive: 0.0214, conservative: 0.0318, tag: 'test' },
{ date: new Date(2013, 8, 25), moderate: 0.0268, aggressive: 0.0231, conservative: 0.0293, tag: 'test' },
{ date: new Date(2013, 9, 1), moderate: 0.0316, aggressive: 0.0224, conservative: 0.0426, tag: 'test' },
{ date: new Date(2013, 9, 8), moderate: 0.0357, aggressive: 0.0202, conservative: 0.0560, tag: 'test' },
{ date: new Date(2013, 9, 15), moderate: 0.0356, aggressive: 0.0105, conservative: 0.0639, tag: 'test' },
{ date: new Date(2013, 9, 22), moderate: 0.0363, aggressive: 0.0124, conservative: 0.0577, tag: 'test' },
{ date: new Date(2013, 9, 29), moderate: 0.0377, aggressive: 0.0115, conservative: 0.0737, tag: 'test' },
{ date: new Date(2013, 10, 6), moderate: 0.0387, aggressive: 0.0114, conservative: 0.0902, tag: 'test' },
{ date: new Date(2013, 10, 13), moderate: 0.0353, aggressive: 0.0117, conservative: 0.0163, tag: 'test' },
{ date: new Date(2013, 10, 20), moderate: 0.0339, aggressive: 0.0114, conservative: 0.0163, tag: 'test' },
{ date: new Date(2013, 10, 27), moderate: 0.0296, aggressive: 0.0150, conservative: 0.0163, tag: 'test' }
];
series = [
		 { valueField: 'conservative', name: 'Консервативный' },
		 { valueField: 'aggressive', name: 'Агрессивный' },
		 { valueField: 'moderate', name: 'Умеренный' }
];

$(function () {
$("#chartContainer").dxChart({
	 dataSource: dataSource,
	 commonSeriesSettings: {
		 type: 'StackedLine',
		 argumentField: 'date',
		 tagField: 'tag',
hoverMode: 'allArgumentPoints',
selectionMode: 'allArgumentPoints'
	 },
	 series: series,
title: 'Population: Age Structure (2000)',
	 argumentAxis: {
		 valueMarginsEnabled: false,
		 label: {
			 overlappingBehavior: 'stagger',
			 format: 'monthAndDay'
		 },
		 grid: { visible: true }
	 },
	 valueAxis: {
		 label: {
			 format: 'percent',
			 precision: 2
		 },
		 tickInterval: 0.03,
/*			 min: 0.01 */
	 },
	 legend: {
		 horizontalAlignment: 'center',
		 verticalAlignment: 'bottom'
	 },
	 pointClick: function (clickedPoint) {
	 $('#selectionSpan').html(clickedPoint.tag);
},
	 tooltip: {
		 enabled: true,
		 argumentFormat: 'monthAndDay',
		 format: 'percent',
		 precision: 2,
		 customizeText: function (e) {
			 return e.valueText + ' in ' + e.argumentText;
		 }
	 }
});
});
}
);

подскажите как в сделать чтобы в "tooltip" (всплывающая подсказка) показывал разницу между текущей точкой (ее значение) и предыдущей!

Т.е. если текущая точка 5.3% а предыдущая 4.7% то в tooltip'e отображалось 0.6%!

Edited October 9, 2013 by rumstore

[IvanArbuzov]

 

Edited November 21, 2013 by IvanArbuzov