Я использую nvd3.js для создания линейного графика, который отображает оценки, которые я вычислил с течением времени. У меня есть дополнительная информация для каждой отдельной точки данных (рейтинг) и хотелось бы, чтобы каждая точка данных на графической ссылке была на уникальной странице с дополнительной информацией об этой конкретной точке данных.
Например: я хотел бы навести курсор на первую точку данных на графике (x: 1345457533, y: -0.0126262626263) и нажать на нее, чтобы перейти на определенную страницу (http://www.example.com/info? id = 1), который предоставляет дополнительную информацию об этом рейтинге или точке данных. Каждая точка данных имеет уникальный идентификатор и уникальный URL-адрес, к которому я бы хотел обратиться.
Вот код, который я использую для генерации графика:
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.axisLabel('Time')
.tickFormat(d3.format('r'));
chart.yAxis
.axisLabel('Rating')
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var data = [ { x: 1345457533, y: -0.0126262626263 },
{ x: 1345457409, y: 0.0224089635854 },
{ x: 1345457288, y: 0.0270935960591 },
{ x: 1345457168, y: -0.0378151260504 },
{ x: 1345457046, y: -0.115789473684 } ]
return [
{
values: data,
key: "Sample1",
color: "#232066"
}
];
}
HTML:
<div id="chart">
<svg></svg>
</div>
И вот рабочий пример.