小程序圖表wx-chart

下載地址

https://github.com/xiaolin3303/wx-charts 

 

 

使用步驟：

一、解壓后，把dist里面的wxcharts.js或者wxcharts-min.js放在小程序的文件夾里，在當前頁面引用文件。

 

二、需要使用圖表的wxss頁面中加canvas的寬高值，若沒有加則不顯示

.canvas {
    width: 100%;
    height: 300px;
}

 

三、在需要使用圖表的wxml 頁面中加xml代碼

ring 環形圖

<canvas canvas-id="ringCanvas" class="canvas"></canvas>

 

column柱狀圖

<canvas canvas-id="columnCanvas" class="canvas"></canvas>

 

 四、在需要使用圖表的js頁面中添加js代碼

首先引入從git上下載的wxchart.js

const wxCharts = require('../../../../utils/ai/wxcharts.js'); // 引入wx-charts.js文件
var app = getApp();
var ringChart = null;
var columnChart = null;

 

 

 

if (that.data.chart.data.length > 0 && that.data.chart.type == 'pie') {//餅圖
          var _series=[];
          //ring圖 處理數據為百分比並保留2位小數
          that.data.chart.data.forEach((r)=>{
            _series.push({
              name: r.name,
              data: r.value,
              stroke: false
            })
          })
　　　　　　//_series 值如下 必須有name、data、stroke 屬性
　　　　　　

          ringChart = new wxCharts({
            animation: true,  //是否開啟動畫
            canvasId: 'ringCanvas',  //輸入wxml中canvas的id
            type: 'ring',   //類型是 環形
            extra: {
              ringWidth: 18,  //環形的寬度
              pie: {
                offsetAngle: -45
              }
            },
            title: {
              name: (that.data.chart.data[0].value * 100).toFixed(0) + '%',
              color: '#4d93f7',
              fontSize: 25
            },
            subtitle: {
              name: that.data.chart.data[0].name,
              color: '#333333',
              fontSize: 15
            },
　　　　　　　　

            series: _series,
            disablePieStroke: true,   //不繪制餅圖（圓環圖）各區塊的白色分割線
            width: windowWidth,       //canvas寬度，單位為px
            height:250,               //canvas高度，單位為px   
            dataLabel: false,         //是否在圖表中顯示數據內容值
            legend: false,            //是否顯示圖表下方各類別的標識
            background: '#f5f5f5',
            padding: 0
          });
        }else if (that.data.chart.data.length > 0 && that.data.chart.type == 'bar') {//柱狀圖
          var _series = [];
          var _categories = [];
          //column圖 處理數據為百分比並保留2位小數
          that.data.chart.data.forEach((r) => {
            _series.push((r.value*100).toFixed(0) ); //[21, 25, 30, 29, 37, 34]
            _categories.push(r.name)   //["保證書、認錯書、悔過書", "照片", "聊天記錄", "證人證言", "錄音", "視頻"]
          })
          // console.log(_categories)
          columnChart = new wxCharts({
            canvasId: 'columnCanvas',
            type: 'column',
            categories: _categories,
            series: [
              {
                name: _categories[0],
                data: _series,
                format: function (val) {
                  return val + '%';
                }
              },
            ],
            yAxis: {
              format: function (val) {
                return val;
              }
            },
            extra: {
              column: {
                width: 30
              }
            },
            width: windowWidth,
            height: 300,
            dataLabel: true
　　　　　　

　　　　　　//划掉的是categories的值

 　　}); 
}else{ 
　　console.log('無圖表數據') 
}