sparklines.js 文档

sparklines.js 是用 TypeScript 开发的迷你图。

折线图

HTML

<div id="line" >line loading</div>
  

JavaScript

sparklines(document.getElementById('line'), {
  values: [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, -6, 7],
});
  

HTML

<div id="bar" >bar loading</div>
  

JavaScript

sparklines(document.getElementById('bar'), {
  values: [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, -6, 7],
  type: 'bar'
});
  

HTML

<div id="pie" >pie loading</div>
  

JavaScript

sparklines(document.getElementById('pie'), {
  values: [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, -6, 7],
  type: 'pie'
});
  

点击按钮重绘图表

HTML

<div id="line" >line loading</div>
  

JavaScript

const changelineEl = document.getElementById('changeline');
const changeline = sparklines(changelineEl, {
  values: [  2, 4, -6, 7],
});
var linebtn = document.getElementById('linebtn');
linebtn.onclick = () => {
  const { render } = changeline;
  render(changelineEl, {
    values: [5, 6, 7, 9, 7],
    type: 'pie'
  });
};