javascript 在时间序列图表中渲染注记

osh3o9ms 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(149)

在chart.js图表中，如果x轴是'timeseries'类型，那么向该图表添加线注解的正确配置是什么？
如果没有timeseries，下面的代码可以按预期工作。

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b, 0) / values.length;
}

const ctx = document.getElementById('chart');

const mean = {
  type: 'line',
  drawTime: 'afterDraw',
  label: {
    display: true,
    content: (ctx) => average(ctx).toFixed(2),
   },
   scaleID: 'y',
   value: (ctx) => average(ctx)
 };

const chart = new Chart(ctx, {
  type: 'line',
  data: {
     labels:   ['', '', '', '', '', '', '', '', '', '', '', '', '', ''],
     datasets: [
       { data: [42, 129, 53, 55, 52, 62, 68, 55, 61, 58, 66, 63, 53, 69] }
     ]
  },
  options: {
    plugins: {,
       annotation: {
         annotations: {
          mean
         }
      }
    }
  }
});

但是，当我介绍timeseries时

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b, 0) / values.length;
}

const ctx = document.getElementById('chart');

const mean = {
  type: 'line',
  drawTime: 'afterDraw',
  label: {
    display: true,
    content: (ctx) => average(ctx).toFixed(2),
   },
   scaleID: 'y',
   value: (ctx) => average(ctx)
 };

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [
      {
        data: [ 
        { x: '2023-04-03 10:32:09', y: 42 },
        { x: '2023-04-03 10:32:16', y: 129 },
        { x: '2023-04-03 10:32:29', y: 53 },
        { x: '2023-04-03 10:32:37', y: 55 },
        { x: '2023-04-03 10:32:44', y: 52 },
        { x: '2023-04-03 10:32:51', y: 62 },
        { x: '2023-04-03 10:33:04', y: 68 },
        { x: '2023-04-03 10:33:12', y: 55 },
        { x: '2023-04-03 10:33:26', y: 61 },
        { x: '2023-04-03 10:34:11', y: 58 },
        { x: '2023-04-03 10:34:27', y: 66 },
        { x: '2023-04-03 10:34:34', y: 63 },
        { x: '2023-04-03 10:34:48', y: 53 },
        { x: '2023-04-03 10:34:55', y: 69 } ]
      },
    ]
  },
  options: {
    scales: {
      x: { 
        type: 'timeseries',
        time: { unit: 'hour' },
        ticks: { beginAtZero: true } 
      }
    },
    plugins: {
       annotation: {
         annotations: {
          mean
        }
      }
    }
  }
});

注解未呈现。
我错过什么了吗？

JavaScript

来源：https://stackoverflow.com/questions/76154872/render-annotation-in-timeseries-chart

2条答案

按热度按时间

uqjltbpv1#

问题是平均函数。当你使用“数据点”（对象作为数据）时，你必须使用表示Y数据的对象的属性。

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  // you have to use b.y to get the y value and not simply b which is an object
  return values.reduce((a, b) => a + b.y, 0) / values.length;
}

赞(0）回复(0）举报 2023-05-05

mcdcgff02#

您应该导入[文档]中提到的日期适配器库
时间刻度要求同时存在日期库和相应的适配器。请从可用的适配器中选择。

<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

当在注解中绘制一条指示平均值的线时，
b是一个对象，相反，我认为你应该用b.y来获取值。

function average(ctx) {
  const values = ctx.chart.data.datasets[0].data;
  return values.reduce((a, b) => a + b.y, 0) / values.length;
}

Demo @ StackBlitz

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 在时间序列图表中渲染注记

2条答案

相关问题

热门标签

最新问答