ChartJs多图表重影问题解决

ChartJs在创建多个图表，并且图表在同一个位置的时候，会发生重影的问题，有两种解决办法

html部分

<div id='canvas_parent'><canvas id='chart'></canvas>
</div>

第一种：在每次创建图表的时候去掉旧的图表

    var pre_chart = null;if (count > 0) {delete(Chart.instances[count-1]);$('#canvas_parent').children().remove();$('#canvas_parent').append("<canvas id='chart'></canvas>");}var ctx = document.getElementById('chart').getContext('2d');var chart = new Chart(ctx, {......},});

第二种：不创建新的图表，更新图表中的数据

    if (Chart.instances[0] != null) pre_chart = Chart.instances[0].chart;if (pre_chart == null) {var ctx = document.getElementById('chart').getContext('2d');var chart = new Chart(ctx, {......},});} else {pre_chart['data']['datasets'][0]['data'] = newData;pre_chart.update();}

ChartJs多图表重影问题解决相关推荐

使用Chart.js创建图表
图表是为应用程序增加最大价值的元素或功能.具有以图形形式显示数据的功能,对于用户读取数据集的百分比非常有帮助. 使用图表有许多优点.包括能够使我们制作的应用看起来更专业.因为原本只是数字的数据看起来更 ...
Processing互动编程开发实践之动态文字打乱功能（别嫌长，代码多，图片多）
这篇文章有什么价值? 简单介绍Processing编程提供一份基于鼠标响应的动画的Processing代码重头戏:描述动态文字打乱功能实现的重要细节,并将源码公开 1.什么是Processing编 ...
Chrome 地址栏
Chrome 地址栏 data:text/html, 打开一句文本开启文本编辑器模式执行一段代码打开一个引入了 [Chart.js](https://www.chartjs.org/) 图表的页 ...
自制研发jira看板（一）
背景: 公司采用jira+confluence的管理系统,主要是在jira上管理bug.公司搭建的系统属于阉割版的,所以缺少很多功能.插件等,尤其是看板,导致项目管理起来比较费劲,不能从整体上了解把控 ...
echarts生成图表超出父容器问题解决
问题描述: 前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况. 情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况 ...
Echarts 问题解决 —— 图表数据过多导致浏览器卡顿、y轴数据添加单位、带圆角及柱状背景的柱状图、legned 图例超出部分显示省略号、柱状图 / 拓扑图（气泡图）渐变色效果
目录 1.图表数据过多导致浏览器卡顿 2.Y轴数据添加单位 3.带圆角及柱状背景的柱状图 4.legned 图例超出部分显示省略号 5.柱状图 / 拓扑图(气泡图)渐变色效果 1.图表数据过多导致浏览 ...
laravel-admin添加图表Chartjs
安装 composer require laravel-admin-ext/chartjsphp artisan vendor:publish --tag=laravel-admin-chartjs ...
chartjs更新数据 vue_vue.js - 在vue中怎么更改chart图表的文字大小
问题 import {Line} from 'vue-chartjs' export default Line.extend({ data () { return { gradient: null, ...
使用OWC 做图表时按周、月、年设置时间刻度是参数无效问题解决方法
设置如下时间刻度: ChartAxisGroupingEnum.chAxisGroupingManual; ChartAxisUnitTypeEnum.chAxisUnitMonth; 需要在Set ...

ChartJs多图表重影问题解决

ChartJs多图表重影问题解决相关推荐

最新文章

热门文章