用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2017-1-13 22:59:07 天下雪原创达人 造轮子 人生巅峰 楼主 11022129
使用说明
  • 安装 npm install
  • gulp build 生成/Chart.js-master/dist/Chart.min.js文件
  • 使用压缩合并版本

    • 打开 dev/page/canvas/chart.js
    • 注释 import Chart from '../../Chart.js-master/src/chart'
    • 开启 import Chart from '../../Chart.js-master/dist/Chart.min'
  • IDE效果
    demo.gif
    适配案例
  • bar
    bar.png
  • doughnut.png
    doughnut.png
  • line
    line.png
  • line-multi-axis
    line-multi-axis.png
  • pie
    pie.png
  • point-styles
    point-styles.png

项目结构:


QQ截图20170113225622.png
代码示例:
[AppleScript] 纯文本查看 复制代码
/**
 * Created by xiabingwu on 2016/11/21.
 */
import Chart from '../canvas/chart'
export default function(canvasConfig){
    var chartColors = {
        red: 'rgb(255, 99, 132)',
        orange: 'rgb(255, 159, 64)',
        yellow: 'rgb(255, 205, 86)',
        green: 'rgb(75, 192, 192)',
        blue: 'rgb(54, 162, 235)',
        purple: 'rgb(153, 102, 255)',
        grey: 'rgb(231,233,237)'
    };

    var randomScalingFactor = function () {
        return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
    }
    var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
    };

    var chartConfig = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                    randomScalingFactor(),
                ],
                backgroundColor: [
                    chartColors.red,
                    chartColors.orange,
                    chartColors.yellow,
                    chartColors.green,
                    chartColors.blue,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                "Red",
                "Orange",
                "Yellow",
                "Green",
                "Blue"
            ]
        },
        options: {
            responsive: false,
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Chart.js Doughnut Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    return {
        chartConfig:chartConfig,
        canvasConfig:canvasConfig
    }
}


项目地址及下载:
https://github.com/xiabingwu/chartjs-wechat-mini-app
chartjs-wechat-mini-app-master.zip (295.64 KB, 下载次数: 3728)
radar-skip-points.png
scatter-multi-axis.png
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
cheng716051 发表于 2017-1-14 08:40
只看到了曲线图 怎么调试其他页面呢? 谢谢亲

更换入口页面路径即可看到,每个文件夹是一个
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
谢谢分享
只看到了曲线图 怎么调试其他页面呢? 谢谢亲
2017-1-14 12:00:05 missq 攻城狮
5#
不错
cheng716051 发表于 2017-1-14 08:40
只看到了曲线图 怎么调试其他页面呢? 谢谢亲

更换入口页面路径即可看到,每个文件夹是一个
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
十分期待看看什么东西
2017-1-15 20:32:14 shencti 架构狮
9#
好图表,收藏了!!!!
2017-1-16 11:19:47 云葵 攻城狮
10#
感谢楼主的分享~
值得借鉴,谢谢
下载学习
66666666666666
试一试,试一试
厉害啊
发新帖
您需要登录后才可以回帖 登录 | 立即注册