У меня есть график, показывающий количество гонок людей (если вы копируете / вставляете приведенный ниже код в любой из примеров flot, он должен работать). Я показываю время по оси Y1 и темп на км по оси Y2, так как они оба времени% H /% M /% S. Но я также хотел бы показать расстояние для каждой расы на графике. Поскольку единицы измерения в этом наборе данных (расстоянии) отличаются от оси Yaxis, показывать их через ось Y не имеет смысла. Я думал, что мог бы добавить детали расстояния к строкам галочки оси x, но это не позволило бы мне повторно использовать данные во всплывающей подсказке позже. У кого-нибудь есть идеи о том, как я могу получить доступ к набору данных «расстояние» из всплывающей подсказки, или как-то перетащить третью шкалу оси Y на график?
<code><h1>Times and Distances</h1>
<pre>
Event Distance Time Pace Km
R1 4 Mile 00:23:14
R2 5 Mile 00:28:27
R3 5 Mile 00:29:08
R4 4 Mile 00:21:16
R5 5 KM 00:16:42
R6 5 Mile 00:25:41 00:03:12
R7 5 KM 00:16:03 00:03:13
R8 5 Mile 00:28:13 00:03:30
$ (function () {
var d1 = [
{
ярлык: «Время»,
строки: {show: true, fill: false},
очки: {показать: правда, заполнить: ложь},
данные: [[0,600000], [1,1200000], [2,1800000], [3,1800000], [4,2400000], [5,3600000], [6,4800000], [7,5200000] ]
},
{
ярлык: «Темп на км»,
яксис: 2,
строки: {show: true, fill: false},
очки: {показать: правда, заполнить: ложь},
данные: [[0,3000], [1,2800], [2,3000], [3300], [42500], [5300], [6,2500], [7,3000] ]
}
//,
// {
// метка: «Расстояние»,
// yaxis: 2,
// бары: {показать: правда},
// данные: [[0,3], [1,2,8], [2,3], [3,3], [4,2,5], [5,3], [6,2,5], [7, 3]]
//}
];
$ .Plot ($ ( "# заполнитель"),
d1,
{
xaxis: {
отметки: [[0, R1], [1, R2], [2, R3], [3, R4], [4, R5], [5, R6] , [6, 'R7'], [7, 'R8']]
},
YAxis: {
режим: «время»,
мин: 500000,
макс: 6000000,
формат времени: "% H:% M:% S"
},
y2axis: {
режим: «время»,
мин: 2000,
макс: 4000,
формат времени: "% M:% S"
},
выбор: {mode: "xy"},
grid: {Hoverable: true, clickable: true}
});
var previousPoint = null;
$ ("# placeholder"). bind ("plothover", function (event, pos, item) {
$ ( "# Х") текст (pos.x.toFixed (2)).
$ ( "# У") текст (pos.y.toFixed (2)).
if (item) {
if (previousPoint! = item.datapoint) {
previousPoint = item.datapoint;
$ ( "# Подсказка") удалить ().
var x = item.datapoint [0] .toFixed (2),
y = item.datapoint [1] .toFixed (2);
showTooltip (item.pageX, item.pageY,
item.series.label + "of" + x + "=" + y);
}
}
еще {
$ ( "# Подсказка") удалить ().
previousPoint = ноль;
}
});
function showTooltip (x, y, contents) {
$ ('
' + contents + '
'). css ({
позиция: «абсолютная»,
дисплей: «нет»,
верх: у + 5,
слева: х + 5,
граница: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
непрозрачность: 0,80
}) AppendTo ( "тело") FadeIn (200)..;
}
});