Highcharts noob здесь, делая небольшой прогресс.
Используя базовый пример из HC, у меня это частично работает, но:
a) как мне отформатировать ось x, чтобы фактическая дата / время изтаблица появляется для каждого y?
b) как сделать так, чтобы эта дата отображалась во всплывающей подсказке?
SO говорит мне, что я пытаюсь вставить слишком много кода и недостаточно обсуждения, поэтому я все это выложилна jsfiddle. (Извиняюсь, если я не научился работать с этой проблемой при публикации.)
Частичный код только для старших чартов js;таблицу данных и HTML можно увидеть на скрипке:
<html>
<head>
(snip: see fiddle for all the JS headers)
<script type="text/javascript">
$(function() {
Highcharts.chart('container', {
data: {
table: document.getElementById('datatable'),
startRow: 0,
endRow: 10
},
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a, %e-%b; %H:%M', this.value);
}
}
},
title: {
text: 'Tides for: Cundy Harbor, New Meadows River, Casco Bay, Maine'
},
yAxis: {
title: {
text: 'Height of tide<br>in feet.'
},
gridLineColor: '#197F07',
gridLineWidth: 0,
lineWidth:1,
plotLines: [{
color: '#FF0000',
width: 1,
value: 0
}]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ft.<br>' + this.point.name;
}
}
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"> </div>
<div>
<table id="datatable">
<thead>
<tr>
<th>Test</th>
<th>Height of Tide</th>
</tr>
</thead>
<tbody>
<tr><th>Monday, Sep 23 2019 18:32</th><td>9.4</td></tr>
<tr><th>Tuesday, Sep 24 2019 01:01</th><td>0.5</td></tr>
<tr><th>Tuesday, Sep 24 2019 07:20</th><td>8.3</td></tr>
<tr><th>Tuesday, Sep 24 2019 13:17</th><td>1.0</td></tr>
<tr><th>Tuesday, Sep 24 2019 19:38</th><td>9.7</td></tr>
<tr><th>Wednesday, Sep 25 2019 02:05</th><td>0.1</td></tr>
<tr><th>Wednesday, Sep 25 2019 08:24</th><td>8.8</td></tr>
<tr><th>Wednesday, Sep 25 2019 14:21</th><td>0.6</td></tr>
<tr><th>Wednesday, Sep 25 2019 20:41</th><td>10.1</td></tr>
<tr><th>Thursday, Sep 26 2019 03:05</th><td>-0.4</td></tr>
<tr><th>Thursday, Sep 26 2019 09:22</th><td>9.4</td></tr>
</tbody>
</table>
</div>
</body>
</html>
``
[jsfiddle here][1]
[1]: https://jsfiddle.net/splobsterman/nzd851au/5/