时间戳

首页 > 解决方案 > 试图从 x-axis-0 获取 minIndex 和 maxIndex

chart.js - 试图从 x-axis-0 获取 minIndex 和 maxIndex

问题描述

我正在尝试捕获数据，如这个问题Chart.js get array of current visible points on graph 中所示，并且正在获取大部分内容。但是，在检查我的 x 轴 0 的属性时，我没有找到线程中详述的 minIndex 或 maxIndex。我确实有 max 和 min 属性，但就我的尝试而言，这些似乎不适用于切片。好奇那些更擅长于 chartjs 的人是否可以帮助我找出 minIndex 和 maxIndex 变量。

编辑更多细节：所以我认为问题可能是在提供的链接中，该示例使用分类数据，而在我自己的示例中，我将 xaxis 作为时间数据？我尝试了 jsfiddle，我在类别类型上看到了 minIndex 和 maxIndex，而在我的时间类型轴上看不到它们。

当我做 x-axis-0 的控制台日志时，我看到以下内容

n {id: "x-axis-0", type: "time", options: {…}, ctx: 

CanvasRenderingContext2D, chart: en, …}
bottom: 475
chart: en {id: 0, ctx: CanvasRenderingContext2D, canvas: canvas#myChart.chartjs-render-monitor, config: {…}, width: 1110, …}
ctx: CanvasRenderingContext2D {canvas: canvas#myChart.chartjs-render-monitor, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
fullWidth: false
height: 15.76
hidden: false
id: "x-axis-0"
labelRotation: 0
left: 35.781484375
longestLabelWidth: 0
longestTextCache: {normal 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif: {…}}
margins: {left: 35.781484375, right: 3, top: 0, bottom: 0}
max: 1614922685400.2363
maxHeight: 237.5
maxWidth: 1074.218515625
min: 1614922568591.0784
minSize: {width: 1074.218515625, height: 15.76}
options: {display: true, position: "bottom", offset: false, gridLines: {…}, scaleLabel: {…}, …}
paddingBottom: 0
paddingLeft: 3
paddingRight: 3
paddingTop: 0
position: "bottom"
right: 1107
ticks: []
top: 459.24
type: "time"
weight: 0
width: 1071.218515625
_adapter: rn {options: {…}}
_endPixel: 1107
_gridLineItems: [ticksLength: 0, borderValue: 459.5]
_labelItems: []
_labelSizes: {first: {…}, last: {…}, widest: {…}, highest: {…}}
_layers: ƒ ()
_length: 1071.218515625
_majorUnit: undefined
_maxLabelLines: 0
_offsets: {start: 0, end: 0, factor: 1}
_reversePixels: false
_startPixel: 35.781484375
_table: (2) [{…}, {…}]
_ticks: []
_ticksToDraw: []
_timestamps: {data: Array(3601), datasets: Array(2), labels: Array(3616)}
_unit: "hour"
__proto__: n

编辑 2：我为此https://jsfiddle.net/d489uesh/创建了一个 jfiddle只是为了进行实验，我为 minIndex 的值做了一个控制台日志，它似乎只有 0 或 1，如果它根本不起作用我使用时间作为轴的类型。所有这一切的最终目标是使用检索到的 y 值数组来计算拖动突出显示缩放选择的平均值，我觉得我很接近，所以感谢任何帮助！

标签： chart.js

解决方案

正如您所提到的，x-axis-0 的控制台日志没有最小和最大索引。我正在从事一个需要与您的解决方案几乎相同的项目，因此必须找到解决方法。

我添加了 moment.min.js 并将时间类型添加到 x 轴，因为没有它拖动缩放似乎不起作用：

type: 'time',
time: { parser: 'HH:mm:ss', displayFormats: { second: "HH:mm:ss" } },

缩放后我从 chart.scales["x-axis-0"].ticks 获得了第一个和最后一个值，并从 chart.data.labels 获得了所需的最小和最大索引，其余的很容易。

var data = chart.data.labels;
var l = chart.scales["x-axis-0"].ticks;
l = l.length -1;
var min = data.indexOf(chart.scales["x-axis-0"].ticks[0]);
var max = data.indexOf(chart.scales["x-axis-0"].ticks[l]);
document.getElementById("vv").innerText = JSON.stringify(chart.data.datasets[0].data.slice(min, max +1));

这是jsfiddle： https ://jsfiddle.net/ModeNashid/84zuqwLa/3/

请注意，我没有检查您包含在 jsfiddle 中的任何资源的版本，因此可能会有一些警告。

推荐阅读