当前位置:主页 > JavsScript库 > 图表 >

μPlot插件库可视化时间序列数据 - μPlot
栏目分类:图表   发布日期:2021-08-15   浏览次数:

μPlot 是一个轻量级、交互式、可扩展、高性能的图表库,用于使用Canvas API可视化任何时间序列数据(按时间顺序索引的一系列数据点)。

更多功能:

  • 十字光标。

  • 可配置的 x 和 y 轴。

  • 具有实时价值的传奇。

  • 动态数据获取。

如何使用它:

1. 下载并导入 μPlot 库。

<link rel="stylesheet" href="uPlot.css"> 
<script src="uPlot.iife.min.js"></script>


2. 准备时间序列数据。

const data = [
      // x-values (Unix 时间戳)
      [1566453600, 1566457260, 1566460860, 1566464460], 
      // 数据 1  
      [0.54, 0.15, 3.27, 7.51],
      // 数据 2
      [12.85, 13.21, 13.65, 14.01],
      // 数据 3
      [0.52, 1.25, 0.75, 3.62]
];


3.示例JS初始化μPlot库。

let myChart = new uPlot({
  
    // 宽度/高度以像素为单位
    width: 960,
    height: 400,
  
    // 图表标题
    title: "My Chart",
  
    // 唯一图表 ID
    id: "chart1",
  
    // 附加 CSS class( es)
    class: "my-chart",
  
    // 决定如何展示你的数据
    series: [
      {},
      {
        // 初始切换状态(可选)
        show: true,
        spanGaps: false,
        // in-legend display
        label: "RAM",
        value: (self, rawValue) => "$" + rawValue.toFixed(2),
        // 系列风格
        stroke: "red",
        width: 1,
        fill: "rgba(255, 0, 0, 0.3)",
        dash: [10, 5],
      }
    ],
  
    // 自定义x、y轴
    axes: {
      y: [
        {
          scale: '%',
          values: (vals, space) => vals.map(v => +v.toFixed(1) + "%"),
        },
        {
          side: 3,
          scale: 'mb',
          values: (vals, space) => vals.map(v => +v.toFixed(2) + "MB"),
          grid: null,
        },
      ],
    }
}, data, document.body);


4. 默认 x 轴选项。

scale: 'x',
space: 40,
height: 30,
side: 0,
class: "x-time",
incrs: timeIncrs,
values: (vals, space) => {
  let incr = vals[1] - vals[0];
  
  let stamp = (
    incr >= d ? fmtDate('{M}/{D}') :
    // {M}/{DD}/{YY} should only be prepended at 12a?   // {YY} only at year boundaries?
    incr >= h ? fmtDate('{M}/{DD}\n{h}{aa}') :
    incr >= m ? fmtDate('{M}/{DD}\n{h}:{mm}{aa}') :
    fmtDate('{M}/{DD}\n{h}:{mm}:{ss}{aa}')
  );
  
  return vals.map(val => stamp(new Date(val * 1e3)));
},
grid: {
  color: "#eee",
  width: 2
}


5. 默认 y 轴选项。

scale: 'y',
space: 30,
width: 50,
side: 1,
class: "y-vals",
incrs: numIncrs,
values: (vals, space) => vals,
grid: {
  color: "#eee",
  width: 2
}


6. x 轴上时间序列数据的默认选项。

label: "Time",
scale: "x",
value: v => stamp(new Date(v * 1e3))


7. y 轴上时间序列数据的默认选项。

shown: true,
label: "Value",
scale: "y",
value: v => v



官方网站:https://github.com/leeoniya/uPlot

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库