Chart-js

Posted on Edited on

title: Chart.js

date: 2019-10-03 11:30:37

tags: html5

categories:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级

  • HTML5 # 一级分类
  • canvas # 二级分类

安装

而另一个版本 Chart.bundle.js 和 Chart.bundle.min.js 早就包含了 Moment.js 。

1
npm install chart.js --save

CDN 引入

1
<script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.bundle.min.js"></script>

模块化引入

1
2
import Chart from 'chart.js';
var myChart = new Chart(ctx, {...});

简单上手

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<canvas id="myChart" width="400" height="400"></canvas>
</body>

<script>
// 获取我们要选择的canvas元素的上下文

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx, {...});


// 使用jQuery获取上下文-使用jQuery的.get（）方法。
var ctx = $("#myChart").get(0).getContext("2d");

// 这将获取jQuery集合中第一个返回的节点。
var myNewChart = new Chart(ctx);
</script>

如果您希望所有创建的图表都具有响应性，并在浏览器窗口打开时调整大小，则可以更改以下设置：

1
Chart.defaults.global.responsive = true;

折线图

折线图是在一条线上绘制数据点的方法.

1
2
3
4
5
var myLineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: options,
});

数据结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var data = {
  //横坐标显示的值
  labels: [2014, 2015, 2016, 2017, 2018, 2019],
  datasets: [
    {
      //第一条线表示优酷
      label: "优酷",
      //设定data数值,表示每年用户总量
      data: [100, 200, 400, 800, 1600],
    },
    {
      //第二条线表示YouTube
      label: "YouTube",
      data: [50, 100, 200, 400, 600],
    },
  ],
};

设置坐标轴

Y 轴

options.yAxes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var options = {
  //设置缩放
  scales: {
    //设置Y轴
    yAxes: [
      {
        //刻度
        ticks: {
          //固定最大最小
          min: 0,
          max: 2000,

          //建议最大最小
          suggestedMin: 0,
          suggestedMax: 2000,

          //跨度
          stepSize: 400,

          //用回调函数设置单位
          callback: function (value, index, values) {
            return value + "人";
          },
        },
      },
    ],
  },
};

标题和图例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var options = {
    //设置标题
    title: {
        display: true,
        text: '阿银',
        fontColor: 'black',
        fontSize: '24',
        position: 'top'
    },
    legend: {
        //设置图例
        position: 'left',
        display: true
    },
    animation: {
        //动态效果,为0时禁用动画
        duration: 1000,
        easing: 'easeOutQuart'
    }

线型变换

data.datasets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var data = {
    labels: [2014,2015,2016,2017,2018,2019],
    datasets: [
        {
            label:  '优酷',
            data: [100,200,400,800,1600],
            //线段颜色
            borderColor: 'red',
            //线宽
            borderWidth: 3,
            //背景色是否填充
            fill: true,
            //背景色
            backgroundColor: 'rgba(128,0,0,0.5),
            //线段曲率,为0显示折线
            lineTension: 0,
            //折点的造型,默认是圆点.可选三角,方块,星星
            pointStyle: 'rect'
        },{
            label: 'YouTube',
            data: [50,100,200,400,600]
        }
    ]
}

条形图(柱状图)

垂直条形图: type: bar

水平条形图: type: horizontalBar

大部分属性类似于折线图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var data = {
  labels: [2014, 2015, 2016, 2017, 2018],
  datasets: [
    {
      label: "优酷",
      data: [100, 200, 400, 800, 1600],
      //为每个条形单独设置颜色
      backgroundColor: ["red", "orange", "yellow", "green", "blue"],
    },
    {
      label: "YouTube",
      data: [50, 100, 200, 400, 600],
    },
  ],
};

还可以设置条形重叠(覆盖)

1
2
3
4
5
6
7
8
9
10
11
12
options: {
        scales: {
            xAxes: [{
                //设置覆盖
                stacked: true
            }],
            yAxes: [{
                //设置覆盖
                stacked: true
            }]
        }
    }

混合图

线形图和条形图的混合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var mixedChart = new Chart(ctx, {
  type: "bar",
  data: {
    datasets: [
      {
        label: "优酷",
        data: [100, 200, 400, 800, 1600],
      },
      {
        label: "YouTube",
        data: [50, 100, 200, 400, 600],
        //再改成线图
        type: "line",
        //防止填充遮盖到条形图
        fill: false,
      },
    ],
    labels: [2014, 2015, 2016, 2017, 2018],
  },
  options: options,
});

雷达图(六边形图)

type = 'radar'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
type = "radar";
var data = {
  labels: ["力量", "速度", "经验", "防守", "技术", "发球"],
  datasets: [
    {
      label: "帝国の破坏龙-马龙",
      data: [5, 5, 5, 5, 5, 5],
      backgroundColor: "rgba(247,247,9,0.2)",
    },
    {
      label: "帝国の绝凶虎-张继科",
      data: [4, 5, 5, 5, 5, 5],
      backgroundColor: "rgba(238,61,17,0.2)",
    },
  ],
};

var options = {
  scale: {
    ticks: {
      suggestedMin: 0,
      suggestedMax: 5,
      stepSize: 1,
    },
  },
  title: {
    display: true,
    text: "桌球帝国战力值",
    fontSize: "24",
  },
};

饼图和甜甜圈

饼图: type: 'pie'

甜甜圈: type: 'doughnut'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
data = {
  datasets: [
    {
      data: [30, 20, 30],
      backgroundColor: ["green", "red", "yellow"],
    },
  ],

  labels: ["马龙", "张继科", "王浩"],
};

var options = {
  //50-用于甜甜圈，0-用于饼图
  cutoutPercentage: 80,
  title: {
    display: true,
    text: "桌球帝国战力值",
    fontSize: "24",
  },
};

极区图

type: 'polarArea'

极区图类似于饼图，但是每个线段具有相同的角度-线段的半径根据值而不同。