Chart.js默认的显示方式是鼠标经过Point点的时候才会显示这个点的值,代码如下:

            var testdata: {
periodNum: ["2018121","2018122","2018123","2018124","2018125","2018126","2018127","2018128","2018129","2018130","2018131","2018132","2018133","2018134","2018135","2018136","2018137","2018138","2018139","2018140","2018141","2018142","2018143","2018144","2018145","2018146","2018147","2018148","2018149","2018150","2018151","2018152","2018153","2018154","2018155","2018156","2018157","2018158","2018159","2018160"],
prriodvalue: [2,3,3,2,4,4,1,1,3,3,3,2,3,1,1,3,2,3,3,2,2,1,1,1,1,2,3,3,1,3,4,1,5,2,2,3,3,3,1,1]
}
var labelData = testdata.periodNum
var chartData = testdata.prriodvalue
var ctx = document.getElementById('test-canvas').getContext('2d');
ctx.lineJoin = 'miter'
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labelData,
datasets: [{
label: "Point点", //名称
borderColor: 'red', //线条颜色
data: chartData, //数据
borderWidth: '1px', //线条大小
pointBackgroundColor: 'red', //点填充颜色
pointBorderColor: '#000', //点边框颜色
pointBorderWidth: '1px', //点边框大小
pointRadius: '5', //点的半径
pointStyle: 'rectRot', //点样式
fill: false, //填充颜色
tension: 0 //张力,0为没曲线
}]
},
options: {}

  

这样子所绘制出来的效果如下图所示:

当鼠标经过2018139那个点的时候才会显示3,但是有时候我们需要默认显示这些值,这个时候需要在options中添加如下代码:

                  options: {
animation: {
onComplete: function() {
var chartInstance = this.chart,
ctx = chartInstance.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
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);
});
});
}
}
}

添加之后你就会发现canvas已经可以默认显示这些值了,如下图所示:

如果需要设置这些值的字体大小、颜色等也可在里面设置。

设置Chart.js默认显示Point点的值不用鼠标经过才显示的更多相关文章

  1. 百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  2. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  3. 在GeoServer里设置图层的默认自定义样式,出现不显示预览图的情况(不起作用)

    在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...

  4. [转]Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  5. Chart.js入门教程

    Chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库. 相信大部分人都一样,看到一大筐用文本或者表格形式呈现的数据就头疼.因为这种呈现方式也太无聊了吧...而且这对于我们处理原始 ...

  6. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

  7. JS组件系列——开源免费图表组件:Chart.js

    前言:最近被开源免费得有点上火了,各种组件首先想到的就是是开源否.是否免费.是否和bootstrap风格一致.想着以后做报表肯定要用到图表组件的,于是在Bootstrap中文网上面找到了Chart.j ...

  8. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  9. js倒计时,显示NaN天NaN时NaN分(或显示天时分)

    最近在开发跨平台的应用,在做秒杀功能时,倒计时出现了问题.默认在Chrome浏览器中运行,倒计时没出现问题.而在IE浏览器,火狐浏览器,safari浏览器上运行时,则显示NaN天NaN时NaN分(或显 ...

随机推荐

  1. java面试5

    1.如何将String类型转化Number类型?列举说明String str = "123"; Integer  num1 = new  Integer(str); int num ...

  2. 3 java 笔记

    1 垃圾回收机制能够很好地提高编程效率 2 垃圾回机制保护程序的完成性 3 面向对象的三种基本特征:继承,封装,多态 4 面向对象的方式:OOA(面向对象的分析),OOD(面向对象的设计)和OOP(面 ...

  3. Vue-Cli项目如何查看依赖调用关系?

    Vue是个优秀的前端框架,不管是前端还是后端开发人员都能很快使用Vue来开发应用.但是随着项目开发的深入,组件之间的依赖就变得越来越多,耦合越来越严重.这时候我们迫切地需要分析下组件和依赖之间的调用关 ...

  4. Samba passwd smbpasswd and tdbsam

    ome commands to convert samba backend password-databases. If you use "passdb backend = smbpassw ...

  5. 针对西门子PLC蠕虫的实现 

    研究背景 随着“互联网+”.“中国智能制造2025“.“工业4.0”等概念的提出,为了提高生产率,独立.隔离的传统工控领域将迎来了新的互联网时代,越来越多的工控设备(如控制器.机器人.数控机床)将被暴 ...

  6. lodash 中 remove

    var obj = { "objectiveDetailId": 285, "objectiveId": 29, "number": 1, ...

  7. 8.Canny边缘检测

    #导入工具包 from imutils import * image = imread('image/school.jpg') show(image) def edge_detection(image ...

  8. 【杭电多校第七场】A + B = C

    原题: Given a,b,c, find an arbitrary set of x,y,z such that a*10^x+b*10^y=c*10^z and 0≤x,y,z≤10^6. 给你三 ...

  9. CF #546 D.E

    D coun[i]表示[i]这个数右边有多少个数j能和他组成题中所给的二元组(i,j) 如果一个数的coun[i]=n-i-ans 那么说明他可以与最后一个交换 同时不计算贡献 因为它是向右走的 对左 ...

  10. aaa服务器

    验证 授权 记账 authentication\authorization.accounting