#Leaflet#用Chart.js在JavaScript生成的canvas里面绘制饼图 获取ElementID后出错

一个基于Leaflet开发的小小小项目

问题大概只这样的:
首先是我用L.control()生成一个控件(info),通过.update()方法对控件进行更新。在.update()中我创建了一个新的canvas元素,之后通过document.getElementById()获取该元素,并使用Chart.js库创建一个饼图。在调用Chart.js库的时候就报错了(TypeError: item is null)。

相关资源:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>

<style>
    #map{ height: 70% }
    .info {
            padding: 16px 10px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255,255,255,0.8);
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
            border-radius: 5px;
        } 
    .info h4 {
            margin: 0 0 5px;
            color: 'white';
        }

  </style>
报错内容如下:
TypeError: item is nullChart.bundle.js:6904:14
acquireContext https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:6904
construct https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8423
Chart https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js:8410
update http://127.0.0.1:5500/static/js/load_tiff.js:85
onAdd http://127.0.0.1:5500/static/js/load_tiff.js:76
addTo http://127.0.0.1:5500/static/js/leaflet/leaflet.js:5
<anonymous> http://127.0.0.1:5500/static/js/load_tiff.js:90
相关代码如下:
var randomScalingFactor = function() {
        return Math.round(Math.random() * 100);
};

var config = {
        type: 'pie',
        data: {
                datasets: [{
                        data: [
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                                randomScalingFactor(),
                        ],
                        backgroundColor: [
                                "rgba(230, 14, 14, 1)",
                                "rgba(230, 122, 14, 1)",
                                "rgba(230, 230, 14, 1)",
                                "rgba(122, 230, 14, 1)",
                                "rgba(14, 122, 230, 1)",

                        ],
                        label: 'Dataset 1'
                }],
                labels: [
                        'Red',
                        'Orange',
                        'Yellow',
                        'Green',
                        'Blue'
                ]
        },
        options: {
                responsive: true
        }
};

var info = L.control();

info.onAdd = function(mymap) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
};


info.update = function() {
        var content = '<h4>Statistic Info</h4>' + '<br />';
        content += '<canvas id="myChart" width="10" height="10"></canvas>';
        this._div.innerHTML = content;
        var piechart = new Chart(document.getElementById('myChart'),config)
};

info.addTo(mymap);

1个回答

你应该把你的html代码放出来,只有css和js看不出来什么

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
用canvas绘制饼图
主要是利用HTML5 Canvas实现饼图绘制,绘制弧度的API主要是使用 context.arc与lineto两个API。 实现的功能有: 1. 支持标签Legend显示或者隐藏 2. 首次载入动画效果 3. 鼠标tooltip效果 4. 自定义饼图大小与是否添加文字
canvas绘制饼图
效果展示: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; canvas { border:1px solid red; display: block...
canvas绘制饼图带百分比
const canvas = document.getElementById(target); const ctx = canvas.getContext('2d'); const startPoint = 1.5 * Math.PI; if (percent &amp;gt; 0) { ctx.fillStyle = '#95B3D7'; ctx.strokeStyle = '#95B3D7';...
Android 使用Canvas绘制饼图
效果: 嗯,一个很简单的饼图绘制。用法 可以在xml文件中配置,也可以直接new一个实例出来。 <com.paoword.oa.view.SectorGraphView android:id="@+id/sector_graph" android:layout_width="120dp" android:layout_heig
HTML5 Canvas(实战:绘制饼图)
有了canvas之后,我们可以很容易地创建一个简单图标,不需要任何插件,不过,有的小伙伴觉得它很难,笔者仔细思考一番之后,只能吐嘈一下他们的绘图技能...于是在开始绘制之前,我们首先画一下草图~ 讲解之前,先贡献出源码:https://github.com/Sue1024/Ca... Make It Reusable 为了创建一个可以重用...
Hencoder 练习 canvas绘制饼图
Hencoder 练习1 canvas如何绘制饼图....................
使用canvas来绘制饼图
饼图
HTML5 Canvas(实战:绘制饼图2 Tooltip)
继上一篇HTML5 Canvas(实战:绘制饼图)之后,笔者研究了一下如何给饼图加鼠标停留时显示的提示框。 Plot对象 在开始Coding之前,笔者能够想到的最easy的方式,就是给饼图的每一个区域添加mousemove事件,鼠标在其上移动时则显示对应的提示框,so easy!可事实不是这样子滴~ 我们肉眼上看上去是一块一块的东西,ca...
用canvas绘制三角形
function drowTriangle() { //绘制三角形 var c = document.getElementById('mycanvas') //获取画板对象 var ctx = c.getContext('2d') //获取上下文 ctx.strokeStyle = '#DF492F' //设置线条颜色 ctx.fi...
用canvas绘制台球
用canvas绘制台球,想做游戏开发,赶紧下吧。
用canvas绘制时钟
canvas是h5新增的元素,下面我们开学习一下怎样用canvas绘制一个时钟 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; canvas{ border
用 Canvas 绘制实时时钟
之前就看过关于 Canvas 的基础,但是还没上过战场实时过呢,今天就来练练手,画一个实时时钟吧~其实这个特别简单,稍微有点耐心都能完成~话不多少,还是喜欢直接上代码:  test.html 代码如下: canvas——时钟 #clock{ border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; }
用Canvas绘制的曲线
绘制简单的线程刷新的曲线。曲线的点以随机数呈现。没隔1秒刷新1个点。
Chart.js插件的canvas大小问题
Detecting when the canvas size changes can not be done directly from the CANVAS element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires...
JavaScript canvas 绘制圆形时钟
canvas 绘制时钟
饼图的绘制
1.创建画布 import matplot.pyplot as plt import numpy as np #设置RC参数 # 默认不支持中文 想要使用中文,要设置RC参数 plt.rcParams['font.sans-serif'] = 'SimHei' # 设置RC参数字体,让其支持中文 # 默认不支持负号,想要支持负号,要设置RC参数 plt.rcParams['axes.uni...
绘制饼图
绘制饼图 * 找规律 -> 得出startA,endA,angle的结论 * startA = endA angle = 比例 * 总度数360° * endA = startA + angle * angle = 自己 / 100.0 * 360 * 一个一个扇形画 * - (void)drawRect:(CGRect)rect{
canvas——用canvas绘制一个等腰三角形
利用canvas绘制一个等腰三角形 颜色设置必须要放在绘制之前 strokeStyle = ‘’必须要放在stroke()之前 设置线宽(同样也是要放在绘制之前):lineWidth = 数字 如果线宽太宽的话图形的边机会出现锯齿 原因:绘制图像的时候是连笔画成的,但是到顶点的时候没有接着画 解决方法:再重复画一次第一条边
用js实现canvas的绘制
canvas绘制 在html中嵌入&amp;lt;canvas&amp;gt;&amp;lt;/canvas&amp;gt;标签 使用js得到canvas引用   canvas操作 设置canvas的宽高  var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight;     得到可绘制...
面向对象思想,用canvas绘制折线图
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;canvas wid
用canvas绘制奥运五环
用canvas绘制奥运五环,好东西,赶快来下载吧!
android 用canvas绘制虚线
paint.setPathEffect(new DashPathEffect(new float[]{4, 4}, 0)); 绘制长度为4的实线后再绘制长度为4的空白区域,0位间隔
前端——用Canvas绘制矩形
CanvasRenderingContext2D提供了两个方法绘制几何图形; fillRect(double x,double y,double width,doubke height) 填充一个矩形区域 strokeRect(double x,double y,double width,double height) 绘制一个矩形边框 也就是说,CanvasRenderingC...
用Canvas绘制贝塞尔曲线(5)
用Canvas绘制贝塞尔曲线(5) Canvas仅提供了二/三次贝塞尔曲线 quadraticCurveTo(x1, y1, x2, y2) 用于绘制二次贝塞尔曲线 由图可知,绘制二次贝塞尔曲线需要三个点(p0/1/2) 在绘制时,画笔当前所在点、(x1,y1)、(x2,y2)即为确定二次贝塞尔曲线曲线所需的三个点 ctx.moveTo(100, 100); ctx.quadr...
用canvas绘制的折线图 +解析
html> html lang="en"> head> meta charset="UTF-8"> title>$Title$title> head> body> canvas id="canvas" width="800" height="600" style="border:1px solid red">canvas> body> script> var canvas
前端——用Canvas绘制折线图
通过CanvasRenderingContext2D对象能够获得绘制矩形的方法,但是想要绘制圆形椭圆等图形,必须在canvas上启用路径,借用路径来绘制图形。 而绘制折线图最主要用到的就是 moveTo()和lineTo()。 这两种方法很好区分: moveTo(double x,double y) 把Canvas的当前路径的结束点移动到x、y对应的点。 lineTo(double...
用canvas绘制一个饼状图...
Canvas,网页原来是可以画出来的... 认识Canvas Canvas绘制矩形 Canvas绘制圆形 使用moveTo()和lineTo()绘制路径 Canvas绘制一个饼状图   认识Canvas canvas是HTML5中新增的一个元素,专门用来绘制图形。在页面放置一个canvas元素,就相当于放置了一个画布,可以在其中进行图形的绘制。但绘制图形,并不是指使用鼠标作画,而是需...
用Canvas绘制线段(2)
用Canvas绘制线段(2) 方法介绍 ctx.moveTo(x,y) 用于移动画笔到(x,y)坐标处,并以此为路径起点进行绘图 ctx.lineTo(x,y) 指定路径的下一个点的坐标,表示使用直线连接该点与上一个点 ctx.stroke() 绘制路径 ctx.lineWidth=20; 设置线段宽度,默认值为1px,较宽的线条在路径上居中,路径上下两边各有...
用canvas绘制星星和月亮
用canvas绘制星星和月亮
用Canvas绘制矩形(3)
用Canvas绘制矩形(3) ctx.rect(x, y, width, height) x,y用于确定矩形左上角在Canvas画布坐标系中的位置;width、height表示宽高 ctx.rect(100, 100, 200, 100); ctx.stroke(); // ctx.fill(); 注意:rect需要结合stroke或fill使用,因为同前面线段一样,rect只是绘...
JS用Canvas绘制太极图.
1.本项目是基于Dcloud的有一个移动APP项目 2.html5页面同时支持浏览器中访问 (绘制太极界面可以直接在浏览器中运行)
JavaScript绘制曲线、圆形饼图实例
JavaScript绘制曲线、圆形饼图实例
canvas动态绘饼图
html> html lang="en"> head> meta charset="UTF-8"> title>$Title$title> head> body> canvas id="canvas" width="800" height="600" style="border:1px solid red">canvas> div>123div> canvas id="canvas
Canvas 制作数据饼图
html代码 ```&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; can
android 里面Canvas绘制文本的方法
在做项目的时候总是会遇到一些要再图片上叠加文字的需求,这个问题的解决方式有很多种,通过布局来实现:一个ImageView和一个TextView堆放好就行,或者直接用button,background为图片,text就是我要放的的文字,这样也可以也,但是最近遇到了一个这些方式解决不了的问题:在使用FAB时要在图标上面添加数字,要说这个问题其实也是个简单的问题,解决的话就是通过Canvas在bitmap
html5 canvas 里面绘制标题 和阴影
rnrn rn rn rn rn rn rn rnrn阴影也不出来 不知道是不是rotate没起作用?还有标题 不出字啊
如何操作canvas里面绘制的内容
绘制canvas在上面的图像是不能绑定鼠标事件的,也没有层的概念,那么canvas做游戏的时候怎么通过鼠标或者键盘去操作canvas上面的某一个图像,比如点击或者选中。rnrnrn
chart.js
chart.js 折线图 怎么在里面绑定数据库里的数据 C#
canvas绘制
rotate     // 旋转画布 填充 drawARGB(int a, int r, int g, int b) drawColor(int color) drawRGB(int r, int g, int b) drawColor(int color, PorterDuff.Mode mode) 几何图形 canvas.drawArc (扇形) canvas.draw
Canvas绘制
1. 矩形的绘制矩形的清除、描边及填充 clearRect(double x, double y, double w, double h) strokeRect(double x, double y, double w, double h) fillRect(double x, double y, double w, double h) context.lineJoin = 'round'; con
相关热词 c# 线程结束时执行 c# kb mb 图片 c# 替换第几位字符 c#项目决定成败 c# 与matlab c# xml缩进 c#传感器基础 c#操作wps c# md5使用方法 c# 引用父窗口的组件