Das Scrollen des Diagramms auf der Y-Achse bei Highcharts-Flattern kann nicht deaktiviert werden ⇐ JavaScript

[Anonymous]

Ich habe mit dem Liniendiagramm von Highchart gearbeitet, um einige Daten darzustellen, und das hat gut funktioniert. Das Einzige, was ich anscheinend nicht finden kann, ist, wie ich diese Bewegung auf der Y-Achse deaktivieren kann. Ich habe versucht, die Schwenk- und Zoomoption zu deaktivieren, aber das Diagramm scrollt immer noch auf der Y-Achse (siehe GIF)


Unten ist die Konfiguration meines Diagramms:

Code: Select all

 return HighchartsChart(
key: chartKey,
keepAlive: true,
debug: true,
HighchartsOptions(
time: HighchartsTimeOptions(
timezone: 'Europe/Amsterdam'),
chart: HighchartsChartOptions(
panning:
HighchartsChartPanningOptions(enabled: false),
type: 'area',
animation: {
'duration': 400,
'easing': 'easeOutBounce',
},
),
legend: HighchartsLegendOptions(
enabled: false,
// layout: 'horizontal',
// align: 'center',
// verticalAlign: 'bottom',
),
title: HighchartsTitleOptions(text: ''),
xAxis: [
HighchartsXAxisOptions(
min: 0,
max: 24,
tickInterval: 4,
lineWidth: 0,
tickWidth: 0,
zoomEnabled: false,
crosshair: HighchartsXAxisCrosshairOptions(
width: 1,
color:
'#${Theme.of(context).colorScheme.primary.value.toRadixString(16).substring(2, 8)}',
dashStyle: 'Solid',
snap: true,
zIndex: 5),
labels: HighchartsXAxisLabelsOptions(
enabled: true,
format: '{value}:00',
style: HighchartsXAxisLabelsStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
gridLineWidth: 0,
gridLineDashStyle: 'Dash',
),
],
yAxis: [
HighchartsYAxisOptions(
zoomEnabled: false,
panningEnabled: false,
title: HighchartsYAxisTitleOptions(
enabled: false,
margin: 0,
text: unit,
style: HighchartsXAxisTitleStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
min: dayGraphData.minY,
max: dayGraphData.maxY,
opposite: true,
gridLineWidth: 1.0,
gridLineColor:
'#${Theme.of(context).colorScheme.onSurface.toARGB32().toRadixString(16).substring(2, 8)}', // Blue labels

labels: HighchartsYAxisLabelsOptions(
enabled: true,
format: '{value}',
style: HighchartsXAxisLabelsStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
gridLineDashStyle:  'Dash',
),
if (graphDataProvider.isWeatherEnabled)
HighchartsYAxisOptions(
zoomEnabled: false,
panningEnabled: false,
min: weatherMin,

max: weatherMax,
title: HighchartsYAxisTitleOptions(
enabled: false,
margin: 0,
text: "°C",
style: HighchartsXAxisTitleStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
opposite: false,
gridLineWidth: 0,
// gridLineColor:
//     '#${Theme.of(context).colorScheme.onSurface.toARGB32().toRadixString(16).substring(2, 8)}', // Blue labels

labels: HighchartsYAxisLabelsOptions(
enabled: true,
format: '{value}',
style: HighchartsXAxisLabelsStyleOptions(
color:
'#${Theme.of(context).colorScheme.onSurface.value.toRadixString(16).substring(2, 8)}', // Blue labels
fontSize: '12px',
),
),
gridLineDashStyle: 'Dash',
),
],
series: seriesList,
plotOptions: HighchartsPlotOptions(
area: HighchartsAreaSeriesOptions(
animation: {
'duration': 400,
'easing': 'swing',
},
marker: HighchartsSeriesMarkerOptions(
enabled: false,
states: HighchartsSeriesMarkerStatesOptions(
normal:
HighchartsSeriesMarkerStatesNormalOptions(),
select:
HighchartsSeriesMarkerStatesSelectOptions(
enabled: true,
radius: 3,
fillColor: '#ffffff'),
),
),
),
series: HighchartsSeriesOptions(
point: HighchartsSeriesPointOptions(
events: HighchartsSeriesPointEventsOptions(
click: HighchartsCallback(
(args) {
debugPrint(
'Point clicked: ${args.first['x']}, ${args.first['y']}',
);
},
),
),
),
),
),
tooltip: HighchartsTooltipOptions(
//   useHTML: true,
followTouchMove: true,
stickOnContact: true,
//   split: false,
shared: true,
formatter:  HighchartsCallback(
(_) {},
'''
// Convert decimal hour (this.x) → HH:mm
var decimal = this.x;
var hours = Math.floor(decimal);
var minutes = Math.round((decimal - hours) * 60);

if (minutes === 60) {
hours += 1;
minutes = 0;
}

var hh = hours.toString().padStart(2, '0');
var mm = minutes.toString().padStart(2, '0');

var html = '' + hh + ':' + mm + '[/b][b]';

// When shared=true, this.points contains all series at this x
this.points.forEach(function (p) {
var yFormatted = Highcharts.numberFormat(p.y, 3);
html +=
'● ' +
p.series.name + ': ' + yFormatted + '[/b]
';
});

return html;
''',
),
),

credits: HighchartsCreditsOptions(enabled: false),

// chart:
))