1回答
在我的angular项目中，我正在尝试为仪表板绘制一些图表。我正在使用chart.js和angular 7来绘制图表。问题是，我不知道应该绘制多少图表，数量将根据http服务调用来决定。该http调用被放置到数据库表。此外，图表将是来自实时数据的实时图表。我正在使用下面的逻辑来绘制图表 <div [hidden]="!charts" class="divchart">
<canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}" &
浏览 12提问于2019-12-13得票数 0
回答已采纳
我试着用https://www.npmjs.com/package/chartjs-node-canvas绘制一个图表，但是标签有一个奇怪的字母间距，它们看起来太分散了。 下面是在浏览器上使用chart.js绘制的图表的图像，在右侧是使用chartjs-node-canvas绘制的图表。你可以看到，标签是唯一真正抛弃它的东西。 我在Chart.js letter spacing very awkward上发现了一个类似的问题，但对这个问题没有答案，所以我希望有人能找到解决方案。 ? 我尝试过直接在节点库中调整画布的canvas.styles.letterSpacing，但到目前为止还
浏览 24提问于2020-08-28得票数 1
回答已采纳
我想在画布元素上画一张图表。我的Jade文件包含以下内容：
div
canvas
在index.js web应用程序中的node.js文件中，我尝试了以下操作：
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.strokeStyle = "rgba(255, 0, 0, 1)";
height = canvas.height;
width = canvas.w
浏览 3提问于2017-05-18得票数 0
回答已采纳
1回答
您好，我正在创建一个Django应用程序，其中我使用Chart.js制作条形图。我有一个创建随机图表的按钮，但当我将鼠标悬停在新生成的图表上时，旧的图表仍然在它后面。我怀疑这与保存图表的HTML画布有关，但我不确定。我只想要一个图表，即单击按钮后创建的图表。在JS中使用this绘制之前，我已经尝试过清除画布的rect。 var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.wi
浏览 31提问于2020-08-31得票数 0
3回答
我有一个安卓应用程序，使用WebView加载图形用户界面使用超文本标记语言。有一个元素，我使用Chart.js Javascript库在其中绘制图表，用于绘制图表。它在3台设备上进行了测试。在其中两个版本(Android 2.2和2.6)上运行良好，但在android的较新版本(4.1.2)上，画布使其加倍:所有图表在画布中都可见两次，其中一个向上和向左移动了一点。
画布有什么问题？为什么它会使渲染的东西加倍？我怎么能让它只渲染一次呢？
代码如下：
HTML：
<canvas id="graph_canvas"></canvas>
JavaSc
浏览 15提问于2013-10-04得票数 0
1回答
我正在通过mustache.js将视图文件加载到<div>容器中。
在该视图中，我在一个专用div中有一个画布元素，我在该元素上使用Chart.js显示图表
<div>
<canvas id="gesundheitsverlauf-chart">
Your web-browser does not support the HTML 5 canvas element.
</canvas>
</div>
当我第一次绘制图表时，一切都很好。当我从视图导航到另一个视图，然后又返回时，图表闪烁(快
浏览 5提问于2017-06-02得票数 1
1回答
我用chart.js制作的图表每次重新绘制时都会增长，我不知道为什么。我的图表cavas代码是： let tempChart = document.getElementById("tempChart").getContext('2d');
let pressureChart = document.getElementById("pressureChart").getContext('2d');
let O3Chart = document.getElementById("O3Chart").getContex
浏览 10提问于2019-02-24得票数 1
2回答
我使用html canvas元素将一些数据绘制成图表。
我在一页上有4张画布，每一页都有一张图表。
当用户单击图表时，我想放大图表。
对于较小的图表，我的代码如下所示：<canvas width='350' height='200' ></canvas>
对于较大的图表，我使用以下属性重新构建相同的图表：<canvas width='700' height='350' ></canvas>
我试过：
onclick -用新的高度和宽度属性重新绘制整个图表。
onclick
浏览 1提问于2013-09-30得票数 1
回答已采纳
1回答
我试图使用Worker来使用Chart.js绘制图表，如Chart.js页面中提到的那样：
部分:与web工作者并行呈现(仅Chrome)
但是在worker.js文件中，我得到了一个错误：
Uncaught ReferenceError: Chart is not defined
我在worker.js中有以下代码
onmessage = function(event) {
const {canvas, config} = event.data;
const chart = new Chart(canvas, config); // Error for Chart
浏览 5提问于2020-09-08得票数 1
回答已采纳
2回答
使用Chart.js库。每次我调用AJAX并用新数据更新图表时，图表就会变得更大(感觉就像它现在可以适当地调整大小或放大)。
我试图在每次重新绘制图表时销毁它，但是我得到了一个"Cannot read property ' destroy‘of undefined“错误。这是我的一小段代码。
myLine.destroy();
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);
myLine.canvas.wid
浏览 1提问于2014-12-28得票数 1
1回答
我使用了一个ng2图表库来绘制一个甜甜圈图表，并使用了一个ngif：
<canvas *ngIf="products?.cost >= 0)" baseChart height="50" width="50"
[data]="doughnutChartData"
chartType="doughnut"
[options]="chartOptions"
[colors]="chartColors">
</canvas>
这
浏览 4提问于2017-08-30得票数 0
我有一个在画布中绘制的chart js条形图：
<canvas id="chart" width="800" height="400"></canvas>
不过，我希望图表符合当前窗口的大小。我试过：
<canvas id="chart" width="100%" height="400"></canvas>
但它不喜欢。我可以使用window.innerWidth获得窗口宽度，但是否有任何理由使100%的窗口不能工作？
浏览 6提问于2016-05-04得票数 4
回答已采纳
2回答
我使用Chart.js在<tr>内的div中显示线图。
<tr class="item">...</tr>
<tr class="item-details">
...
<div class="col-sm-6 col-xs-12 chart-pane">
<div class="chart-container">
...
<div><canvas id="futu
浏览 8提问于2016-01-30得票数 9
1回答
设置画布背景颜色
、、
我正在用Chart.js绘制时间序列图，它使用<canvas>来绘制。我们的用户希望能够下载这些图表的图像以放入他们的报告中。网站的背景是深色的，所以图表本身使用的是浅灰色。这意味着当用户右键单击(在Chrome中)并选择“将图像另存为...”他们得到一个带有灰色/白色线条的透明图像(显然不是很明显)。
我一直试图重写canvas.toDataURL，以便先绘制一个rect ，但重写不起作用(我假设它不可写)。有没有其他方法可以做到这一点？
浏览 3提问于2016-02-11得票数 1
嗨，我当前的代码已经有了一个createCanvas命令，所以我想知道是否可以在不使用canvas标记的情况下绘制图表呢？
当前代码：
canvasContainer = select('#app');
var c = createCanvas(1024, 600);
c.parent('app');
Chart.js使用以下内容：
<div>
<canvas id="myChart"></canvas>
</div>
浏览 4提问于2022-08-10得票数 0
1回答
如何清除每次更新的画布？
、、、、
我对我的第一个ionic web应用程序有一个问题。我应该做一些图表，所以我决定使用d3.js和tree.js。我添加了用不同类型的图表可视化我的数据的可能性。当我在相同的画布中绘制不同的图表时，问题就会出现，所以我想我必须在每次更新之前清除画布。这是我的代码：
// Some operations
var canvas = this.components.toArray()[idItem].nativeElement;
this.barChart = new Chart(canvas, {
type: type,
data: {
labels: keys,
浏览 3提问于2018-04-24得票数 0
1回答
我正试着定期更新图表。数据正在生成数据集，但我无法让它绘制图表。我做错了什么？
const ctx = document.querySelector('#apichart canvas').getContext('2d');
const apichart = new Chart(ctx, {
type: 'line',
data: {datasets:[{
label:'Pressure',
data: [1025,1000],
fill:false,
borderColor: '
浏览 1提问于2021-12-15得票数 2
回答已采纳
我有一个模板(使用角路径映射的更大html的部分视图)，代码如下：
<div style="width: 100% !important; max-width: 1000px; height: auto !important;">
<canvas id="barChart">
</canvas>
</div>
在角控制器的initalization上，我用以下代码创建了一个图表：
$scope.chart = new Chart(document.getElementById(
浏览 2提问于2015-09-17得票数 1
回答已采纳
我正在使用chart.js制作一个图表，这是不足为奇的，我正在努力弄清楚如何干净和正确地用angular.js重写我的代码。
香草实施
如果我只是使用和html，我可能会做一些归结为这样的事情：
<canvas id='chart'></canvas>
<script>
data = {...} // dictionary of chart data, omitted for brevity
options = {...} // dictionary of chart options, same^
var ctx =
浏览 3提问于2015-07-23得票数 0
回答已采纳
1回答
我的用例是，我用Chart.js绘制一个图表，当用户处理某些选项时，我希望从我绘制的条形图中添加或删除条形图，并相应地更新原来(以编程方式)在图表上设置的固定宽度。
下面是我绘制图表的方法：
function drawChart(barData) {
oldData = barData;
var ctx = document.getElementById("estimateChart").getContext("2d");
ctx.canvas.width = getChartWidth(barData.length);
var chartDat
浏览 1提问于2015-07-14得票数 0
1回答
我正在尝试从用chart.js绘制的图表中获取图像(例如png)。其想法是将此图像发送到后端，然后将其包含在更大的报告中。
从图表的画布中生成图像非常简单-我可以这样做
var canvas = document.getElementById('canvasIwantToRenderForTheBackend');
canvas.toDataURL("image/png");
// or
canvas.getImageData();
我遇到的问题是，这会使图表图像看起来像用户创建报告时的样子。
我需要的是创建一个固定大小的画布，在其中绘制图表，并将画布导出到图像
浏览 10提问于2020-03-05得票数 0
回答已采纳
2回答
当我试图用chart.js在画布上用角度重新绘制图表时，我遇到了一些问题。下面是我的HTML组件：
<div class="form-group">
<select [(ngModel)]="timeMode" id="timeModeInput" class="browser-default custom-select" (change)="onTimeModeChange($event)">
<option value="all" select
浏览 1提问于2019-06-19得票数 1
回答已采纳
1回答
我哪儿也找不到这个问题的答案。也许你能帮我。我用画布和div (canvas:chart.js / div:morris.js)绘制图表。我只是用HMTL5设置元素拖放，它工作得很好，但是当我移动画布时，它会擦去上面的所有东西。在div图上停留，但与画布无关。在我每次移动画布时，除了重绘之外，还有别的解决方案吗？
谢谢你的帮助
编辑:代码示例
<article class="widget" draggable="true">
<header>
</header>
<canvas class=
浏览 2提问于2014-06-06得票数 0
回答已采纳
1回答
在Chart.js中有什么方法可以忽略数据数组中的一些值并在没有它们的情况下绘制图表吗？标签选项是必备的。下面是示例：https://codepen.io/rom4uk/pen/WNQjWEW?editors=0010 <div class="line-chart">
<div class="aspect-ratio">
<canvas id="chart"></canvas>
</div>
</div>
浏览 12提问于2020-04-27得票数 0
回答已采纳
1回答
我一直在开发一个移动应用程序，在那里我使用图表JS。我被塞在一个地方，我需要通过点击一个图标来绘制图表。
问题是，图标位于templat1.html，图表应该在templat2.html绘制。我正在使用angularJS。因此，每个图表都有自己的控制器。
因此，图表的所有代码都位于template2Controller。问题是，如何通过单击templat1.html上的图标来绘制templat2.html上的图表。
template1.html
<button class="" ng-click="daily()"> </button>
浏览 3提问于2017-02-24得票数 0
回答已采纳
1回答
我有一个在页面x上构建的图表，但是我想在页面y中加载这个图表，我该怎么做呢？ 我正在尝试使用服务，但它不起作用。 第x页 chart = [];
this.chart = new Chart('canvas', {
type: 'line',
data: {
labels: this.datas,
datasets: [{
label: 'Score',
fill: false,
backgroundColor: '
浏览 21提问于2019-06-09得票数 0
1回答
我在这个问题上看到了几个解决办法，但还没有找到适合我情况的解决办法。我有一个用chart.js制作的图表，它使用canvas来显示。我有一个函数应该清除canvas，这样我就可以用不同的x变量重新绘制图表。该函数最初起作用，但当我开始在已清除的画布上悬停时，旧内容就会重新出现。更具体地说，如果我停留在以前的数据点上，它似乎会再次出现。
以下是功能：
function empty(){
canvas = document.getElementById("loansChart");
const context = canvas.getContext('2d&
浏览 2提问于2019-09-16得票数 0
回答已采纳
我正在使用chartjs库来渲染我正在使用的散点图，并希望在图表上绘制一条参考线，所以我使用了charts-annotation在散点图上绘制了一条线，但是由于某种原因，这条线是不可见的，但我能够看到散点图是完全绘制出来的，任何人都可以帮助我。
HTML
<html>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
JS
var
浏览 12提问于2020-05-08得票数 2
回答已采纳
1回答
我正在尝试绘制一个图表，它描述了在过去07天内获得通行证的人数。
我在后端使用PHP和phpMyAdmin's MySQL DBServer。为了绘制图表，我使用了chart.js (我愿意接受不同库的建议以获得合适的解决方案，因为我只是偶然发现了这个库)
创建用于chart.js JS代码的结果数据集的PHP代码如下：
<?php
$servername = "localhost";
$username = "xyz";
$password = "xyz";
$dbname = "xyz&#
浏览 44提问于2019-07-15得票数 0
回答已采纳
我试图用AJAX绘制一个使用chart.js的线条图，但是当数据来自服务器时，图表没有被正确地绘制出来。图表在window onload事件上绘制得很好，但是使用AJAX无法正确呈现。有什么问题吗？这是我的密码-
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>AJAX JSON Chart</title>
<script type="text/javascript" src="js
浏览 3提问于2015-05-14得票数 1
2回答
我正在使用angular-chart.js在我的应用程序中绘制图表。但我正面临着一个问题。图表图例显示的是未定义的而不是标签。
我的js代码：
$scope.labels_std = ['Total Students', 'Submitted fee', 'Has to submit'];
$scope.options = {legend: {display: true, position: 'bottom'}};
$scope.colors = ['#4D5360'
浏览 1提问于2017-06-15得票数 2
回答已采纳
1回答
我试图显示多个图表(从chart.js库)，我希望每个图表在一个v-slider-item中。
在开始时，有人告诉我我的代码不工作，因为我试图在更新canvas元素之前将图表DOM附加到v-slider-item中，因此没有呈现v-slider-items，所以我在this.nextTick()中执行了图表绘制代码
这样做之后，代码只在v-slider-item中呈现第一个图表，而不会呈现其余的图表.
下面是指向代码页的链接，该链接显示错误：
浏览 1提问于2021-11-10得票数 2
回答已采纳
1回答
我使用Chart.Js绘制VF页面中的散点图，但在预览中，没有显示该图表。没有得到任何错误，但没有显示图表。下面是我的VF页面code.Appreciate您的帮助
<apex:page showHeader="true" sidebar="false" id="page" docType="html-5.0">
<html>
<head>
<meta charset="utf-8"/>
<title>Chart.js demo</t
浏览 10提问于2022-09-05得票数 0
回答已采纳
1回答
我使用角图(和角图，很明显)和chart.js在一个页面上绘制几个图表。目前，每个图表占据了屏幕的整个宽度。我尝试过许多不同的变体，根据"window.innerWidth“的比率来限制宽度，还有许多不同的结构变化。我所有的努力都被忽视了。它绘制了一个非常精细的图表，但宽度不变(除了当我展开/缩小整个窗口时进行更改)。
下面是我当前HTML的摘录：
<div ng-repeat="dataCenterData in dataCenterDataList">
<div ng-style="{'width': windowWi
浏览 1提问于2016-08-11得票数 0
1回答
我试图缩短我的图表图例，所以我使用beforeRender插件来改变图例的文本。然而，一旦图表被绘制出来，它似乎保持了原来的标签大小(见下面的片段，传说被偏移到左边而不是中间，如果你点击橙色，它会切换前面的项目之一)。
如果我尝试使用beforeDraw，如果我使用beforeInit或beforeLayout，则似乎还没有创建传说。
有什么方法可以让图表用新的文字重绘传奇吗？还是更改图例文本以使其正确呈现？
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar
浏览 2提问于2022-07-05得票数 1
回答已采纳
我正在尝试画一个图表的背景。如果我试着打电话
canvas.beginFill(0xff0000,1)
canvas.drawEllipse(10,200,300,-30);
canvas.endFill()
和-30超出了图表的范围，它不会绘制任何内容。我想让它画一个被图表边缘截断的椭圆。
浏览 2提问于2009-09-18得票数 0
目前，我在条形图(NG2-图表)上有一条水平线(用chartjs-plugin-注释绘制)，.The值最初是在图表选项" value : 25000“中设置的，然后绘制图表，但是在新的图表数据被推入数据集注释(在ngOnInit方法中)之后，值不会用来自服务器的新数据更新(图表js不会用新数据刷新)。
ts文件中的代码：
barChartOptions: any = {
legend: {
position: 'bottom',
display:false,
labels: {
fontSize: 1
浏览 0提问于2018-03-13得票数 1
回答已采纳
我使用chart.js及其依赖项jQuery来绘制图表。在我的例子中，我的一个页面中需要两个甜甜圈图表，下面是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-
浏览 1提问于2018-11-06得票数 4
回答已采纳
3回答
问:在以下情况下，canvas是否比svg更适合？
案例:我正在绘制一个图表(使用d3js库)，类似于这个图表(但包含更多的数据)：
它是基于svg的，它适用于数千行(最多5000行)，添加更多行(svg路径)会显著降低性能(在页面中滚动变得缓慢)
请记住:我需要添加鼠标事件(这在svg中很方便)
浏览 2提问于2012-12-20得票数 6
回答已采纳
1回答
如何将两个图像合并为一个？
、、、、
我正在做的是将D3.js生成的图表(HTML图表图例+ SVG表示图表体)转换为图像，现在我使用html2canvas并手动将SVG转换为图像数据，原因是html2canvas只能处理SVG中的html部件和文本元素。
，所以我的问题是：
一旦我拥有了和图像数据( svg部分类似于：'data:image/svg+xml;base64,'+ btoa(svg); (我可以通过构建图像对象并在画布上绘制它来将其转换为类似的数据-url)和html部分来自canvas.toDataURL )，我如何才能将它们合并到一起以获得完整的图像。
///////////////
浏览 4提问于2015-06-01得票数 2
回答已采纳
我正在使用Chart.js绘制几个条形图。我想修改所有图表的工具提示的默认内容。
但以下代码不起作用：
Chart.defaults.global.tooltips.callbacks.title = function(tooltipItems, data) {
return "Overriden title"; // This code is not executed
};
new Chart($("#barchart"), {
type: 'horizontalBar',
data: {
"labels
浏览 27提问于2018-01-26得票数 0
回答已采纳
1回答
在页面加载时，将绘制charts.js图表(更多信息将在下面介绍)。我还有一些复选框比如..。
<input type="checkbox" id="something" name="something" value="25" data-val="25" checked="checked" class="option">
<label for="something">Something</
浏览 2提问于2016-04-13得票数 1
回答已采纳
3回答
我使用位图和画布创建了第一个图表。如何清除位图以绘制新图表？
ImageView imageView = new ImageView(this);
Bitmap bitmap = Bitmap.CreateBitmap(w, h, Bitmap.Config.Argb8888);
Canvas canvas = new Canvas(bitmap);
...
imageView.SetImageBitmap(bitmap);
relativeLayout.AddView(imageView);
浏览 0提问于2015-05-27得票数 7
回答已采纳
1回答
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3/d3.min.js"></script>
</head>
<body>
<script type="text/javascript">
var dataA=[10,20];
d3.select("body").style("background-color", &#
浏览 1提问于2015-08-09得票数 1
回答已采纳
1回答
下面是我尝试用随机数据每秒更新一次图表，并动态地重新绘制图表。函数adddata()将随机数据推送到数据数组，但图表UI没有更新，显示为静态的。添加新数据时如何动态更新图表？
src：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jque
浏览 5提问于2020-05-25得票数 0
回答已采纳
1回答
在隐藏的DIV上呈现图表
、、、
我试图在隐藏的div上使用呈现许多图表，然后将它们转换为要在PDF报表中使用的图像。
我的问题是:如果没有在DOM上呈现图表，我就无法捕获它并在canvas上绘制它。在图表显示之前，它不会呈现。我尝试过使用draw和chart.js中的render方法，但它们并没有产生预期的结果。
下面是我的HTML示例：
<div style="display: none;">
<canvas id="myChart"></canvas>
</div>
我相应的JavaScript：
var canvas: any = do
浏览 4提问于2020-02-06得票数 4
回答已采纳
我试图用chart.js绘制一个实时图表。sesnor提供实时数据，这些数据将被更新以绘制在图表上。为了添加或更新数据，我遵循了文档中提供的步骤，但它显示了错误:Chart.js：未能创建图表:无法从给定的项获取上下文，正在实现一个新类(makeChart)，构造函数中定义了图表对象和图表实例。下面是同一个类中的addData方法，这个方法在refresh类中被调用(另一个类称为Dashbaord)。AddData方法应该以documentation.This中给定的相同格式更新数据，这些数据都位于一个名为dashboard.js的java文件中。要绘制图表的画布位于一个名为dashbaord
浏览 5提问于2020-03-30得票数 0
我使用此代码根据鼠标位置在我的图表上绘制一个十字
//Setup color
Canvas.Pen.Style := psSolid;
Canvas.Pen.Width := 1;
CrossSize := 30;
Canvas.Pen.Mode := pmNotXor;
Canvas.Pen.Color := clGray;
//Draw the cross
Canvas.MoveTo(X - CrossSize, Y);
Canvas.LineTo(X + CrossSize, Y);
Canvas.MoveTo(X, Y - CrossSize);
Canvas.LineTo(X, Y
浏览 0提问于2018-06-08得票数 0
我在html5 IOS应用程序中使用Chart JS ()时遇到了一个奇怪的间歇性问题。
我定义了我的画布，如下所示-
<canvas id="overallChart" height="270" width="270" style="height:270px!important; width:270px!important;"></canvas>
一个页面有多个图表-这些图表是通过一个基本的图表js设置触发的-
var lineData = {
labels : ["Jan",
浏览 1提问于2013-09-02得票数 0
我的问题是，在图表实际完成绘制之前，事件onAnimationComplete会被触发。
我使用的是ASP.NET MVC。
这是我的代码：
HTML：
<canvas id="scanedTodayChart" width="100" height="100"></canvas>
JS：
var scanedTodayChartCtx = document.getElementById("scanedTodayChart").getContext("2d");
var scanedToda
浏览 0提问于2016-06-09得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
