Я использовал график графика для моей страницы. Он был загружен динамическими c данными из базы данных. А также он показывает данные за день, неделю, месяц. Он работает нормально для всего диапазона. Моя проблема в том, что я не знаю, как показать подсказку для всей записи при наведении курсора, с данными Dynami c. Моя js кодировка
(function () {
var scoreChart = function scoreChart(id, labelList, series1List) {
var scoreChart = new Chartist.Line('#' + id, {
labels: labelList,
series: [series1List]
}, {
lineSmooth: Chartist.Interpolation.simple({
divisor: 2
}),
fullWidth: true,
chartPadding: {
right: 25
},
series: {
"series-1": {
showArea: false
}
},
axisX: {
showGrid: false
},
axisY: {
labelInterpolationFnc: function labelInterpolationFnc(value) {
return value ;
},
scaleMinSpace: 40
},
plugins: [Chartist.plugins.tooltip()],
low: 0,
showPoint: false,
height: 300
});
scoreChart.on('created', function (data) {
var defs = data.svg.querySelector('defs') || data.svg.elem('defs');
var width = data.svg.width();
var height = data.svg.height();
var filter = defs.elem('filter', {
x: 0,
y: "-10%",
id: 'shadow' + id
}, '', true);
filter.elem('feGaussianBlur', { in: "SourceAlpha",
stdDeviation: "24",
result: 'offsetBlur'
});
filter.elem('feOffset', {
dx: "0",
dy: "32"
});
filter.elem('feBlend', { in: "SourceGraphic",
mode: "multiply"
});
defs.elem('linearGradient', {
id: id + '-gradient',
x1: 0,
y1: 0,
x2: 1,
y2: 0
}).elem('stop', {
offset: 0,
'stop-color': 'rgba(22, 141, 238, 1)'
}).parent().elem('stop', {
offset: 1,
'stop-color': 'rgba(98, 188, 246, 1)'
});
return defs;
}).on('draw', function (data) {
if (data.type === 'line') {
data.element.attr({
filter: 'url(#shadow' + id + ')'
});
} else if (data.type === 'point') {
var parent = new Chartist.Svg(data.element._node.parentNode);
parent.elem('line', {
x1: data.x,
y1: data.y,
x2: data.x + 0.01,
y2: data.y,
"class": 'ct-point-content'
});
}
if (data.type === 'line' || data.type == 'area') {
data.element.animate({
d: {
begin: data.index,
dur: 1000,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
easing: Chartist.Svg.Easing.easeOutQuint
}
});
}
});
};
var DayLabelList = <?php echo $daydate; ?>;
var DaySeries1List = {
name: "series-1",
data: <?php echo $daysales; ?>
};
var WeekLabelList = <?php echo $weeklydate; ?>;
var WeekSeries1List = {
name: "series-1",
data: <?php echo $weeklysales; ?>
};
var MonthLabelList = <?php echo $monthlydate; ?>;
var MonthSeries1List = {
name: "series-1",
data: <?php echo $monthlysales; ?>
};
var createChart = function createChart(button) {
var btn = button || $("#ecommerceChartView .chart-action").find(".active");
var chartId = btn.attr("href");
switch (chartId) {
case "#scoreLineToDay":
scoreChart("scoreLineToDay", DayLabelList, DaySeries1List);
break;
case "#scoreLineToWeek":
scoreChart("scoreLineToWeek", WeekLabelList, WeekSeries1List);
break;
case "#scoreLineToMonth":
scoreChart("scoreLineToMonth", MonthLabelList, MonthSeries1List);
break;
}
};
createChart();
$(".chart-action li a").on("click", function () {
createChart($(this));
});
})();
Заранее спасибо. Диаграммы содержат 3 части для дня / месяца / недели. При каждом нажатии на них отображаются соответствующие данные