Chart.js 长久未更新

[liudonghua123]

此项目依赖的 https://github.com/chartjs/Chart.js 已经长久未更新，建议试用 git submodules 定期更新维护

[liudonghua123]

我当前尝试了简单的集成，方法如下：
下载 https://github.com/chartjs/Chart.js/releases/latest 解压 或者 使用 npm 安装

然后添加上一点点适配代码（主要是解决小程序里面没有 document、getComputedStyle 等）

完整的示例代码如下

const app = getApp()
// const Chart = require('../package/dist/Chart.bundle');
const Chart = require('chart.js');

Chart.helpers.getStyle = function (el, property) {
  // return el.currentStyle ?
  //   el.currentStyle[property] :
  //   document.defaultView.getComputedStyle(el, null).getPropertyValue(property);
  console.info(`getStyle(${el}, ${property})`);
  return 0;
};
Chart.helpers._calculatePadding = function (container, padding, parentDimension) {
  // padding = helpers$1.getStyle(container, padding);
  // return padding.indexOf('%') > -1 ? parentDimension * parseInt(padding, 10) / 100 : parseInt(padding, 10);
  console.info(`_calculatePadding(${container}, ${padding}, ${parentDimension})`);
  return 0;
};
Chart.helpers.getConstraintWidth = function (domNode) {
  // return getConstraintDimension(domNode, 'max-width', 'clientWidth');
  console.info(`getConstraintWidth(${domNode})`);
  return 350;
};

const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
    ],
    borderColor: [
      'rgba(255, 99, 132, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
    ],
    borderWidth: 1
  }]
};

Page({
  data: {},

  onLoad: function () {
    this.position = {
      x: 150,
      y: 150,
      vx: 2,
      vy: 2
    }
    this.x = -100

    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .node()
      .exec(this.init.bind(this))
  },

  init(res) {
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')

    var myChart = new Chart(ctx, {
      type: 'bar',
      data,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
      }
    });

  },

})

[liudonghua123]

当然也可以尝试 https://github.com/xiaolin3303/wx-charts 或者 https://github.com/antvis/wx-f2 或者自己集成 ECharts ( https://github.com/apache/incubator-echarts )、
Highcharts( https://github.com/highcharts/highcharts )