chart.js插件显示具体数值

最新推荐文章于 2024-05-16 10:07:12 发布

不爱运动的Pluto

最新推荐文章于 2024-05-16 10:07:12 发布

阅读量1.1w

点赞数 3

分类专栏： Chart.js JavaScript

本文链接：https://blog.csdn.net/ALaDingPro/article/details/82590390

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Chart.js

2 篇文章 0 订阅

订阅专栏

简介

Chart.js是一款不依赖任何外部js库的图表插件，具体的使用方法可查看Chart.js官网。

需求

Chart.js并没有直接提供显示具体数值的功能，需要鼠标移上去，才会显示数值，现在，我们需要显示具体的数值。

效果

在每一条柱状上显示具体数值。

Chart.js效果

代码实现：

该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：

// 将hover动画设置为0，防止鼠标悬停产生闪烁
hover: {animationDuration: 0}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Chart示例</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
	<canvas id="barChart"></canvas>
</body>
<script>
    // 功能 返回随机的颜色值
    // @param opacity 透明度
    // @return rgba格式颜色值
    var dynamicColors = function (opacity) {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        var a = opacity;
        return "rgba(" + r + "," + g + "," + b + "," + a + ")";
    }

    // 功能 返回rgba格式颜色数组
    // @param length 数组的长度
    // @param opacity 颜色的透明度
    // return 返回rgba数组
    var getColorArr = function (length, opacity) {
        var colorArr = new Array();
        for (var i = 0; i < length; i++) {
            colorArr.push(dynamicColors(opacity));
        }
        return colorArr;
    }

    

    // 准备数据
    var labels = ['一月','二月','三月','四月','五月','六月','七月'];
    var data = [12, 10, 5, 2, 20, 30, 45];
    var chartData = {
        // x轴显示的label
        labels: labels,
        datasets: [{
            data: data, // 数据               
            label: '业务考核得分',// 图例
            backgroundColor: getColorArr(labels.length,0.5),
            borderWidth: 1
        }]
    };
    // 绘制图表
    var ctx = document.getElementById('barChart').getContext('2d');
    var bar = new Chart(ctx, {
        type: 'bar',
        data: chartData,
        options: {
            hover: {
                animationDuration: 0  // 防止鼠标移上去，数字闪烁
            },
            animation: {           // 这部分是数值显示的功能实现
                onComplete: function () {
                    var chartInstance = this.chart,

                    ctx = chartInstance.ctx;
                    // 以下属于canvas的属性（font、fillStyle、textAlign...）
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.fillStyle = "black";
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            }
        }
    });

</script>
</html>

不爱运动的Pluto

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
5
评论
chart.js插件显示具体数值

简介Chart.js是一款不依赖任何外部js库的图表插件，具体的使用方法可查看Chart.js官网。需求Chart.js并没有直接提供显示具体数值的功能，需要鼠标移上去，才会显示数值，现在，我们需要显示具体的数值。效果在每一条柱状上显示具体数值。代码实现：该代码可自动填充颜色。为了防止鼠标悬停时闪烁，需要添加以下代码：// 将hover动画设置为0，防止鼠标...
复制链接

扫一扫