使用myChart = new Chart(ctx，myChartConfig)实例化时，chartjs在哪里记录了myChartConfig中需要的内容
在使用myChart = new Chart(ctx, myChartConfig)实例化时，Chart.js会将myChartConfig中需要的内容记录在myChart对象中。
myChart对象是一个Chart.js图表实例，它包含了所有与该图表相关的配置、数据和方法。通过myChart对象，可以对图表进行各种操作，如更新数据、改变配置、销毁图表等。
myChartConfig是一个包含了图表配置的对象，它定义了图表的类型、数据、样式等。常见的配置项包括：
type：指定图表的类型，如折线图(line)、柱状图(bar)、饼图(pie)等。data：指定图表的数据，包括标签(labels)和数据集(datasets)。options：指定图表的选项，包括标题、轴标签、样式等。
以下是一个示例myChartConfig对象：
var myChartConfig = {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};通过实例化myChart对象，Chart.js会根据myChartConfig中的配置绘制相应的图表，并将其记录在myChart对象中，以便后续的操作和交互。
相关·内容
2回答
当用户每次在ChartJS中选择一个新的图表类型时，我试图确定重新加载画布的正确方式，现在它不会更改图表类型：
chartJs.js
var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 600;
ctx.canvas.height = 200;
var determineChart = document.getElementById("chartType");
if( determineChart =
浏览 2提问于2015-10-21得票数 2
2回答
烧瓶与海图JS散点图斗争
、、、
我想使用ChartJS在我的烧瓶应用程序中生成一个散点图。我有两份名单：
height=[168,170,180,190,200]
weight=[70,80,90,100,70]
我找不到一个例子，说明如何在ChartJS中使用我的酒瓶列表。我的解决方案行不通。我的逻辑是否有某种解决方案：
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
浏览 2提问于2018-04-19得票数 1
回答已采纳
我正在尝试在vue组件中使用chartJs构建图表，但在页面上呈现它时遇到了困难。有没有人能告诉我我的错误在哪里？
// this is my HTML canvas tag
<canvas id="myChart" width="400" height="400"></canvas>
下面是我的Js代码
import Chart from 'chart.js';
export default {
methods: {
CreateChart(chartId,chartD
浏览 5提问于2018-07-23得票数 0
我是新的图表js，试图实现在角4应用程序。即使在浏览器中没有出现代码图表中的错误。我查阅了大量的文档和在线材料来实现图表。我花了将近3天的时间找出了cause.Please，帮助我纠正同样的问题。
Here is my code
dependencies:
Chart.js："^2.7.3“
角cli.json
“./node_modules/chart.js/dist/Chart.js”，
在组件中
从“chart.js”导入{Chart}；
ngOnInit() {
const el = <HTMLCanvasElement> docu
浏览 3提问于2019-01-06得票数 0
我想找出chartjs的销毁方法，但效果不太好。我用一个虚拟按钮在虚拟数据上做这件事，但这是我有的。
用于测试的非常简单的html标记：
<div class="container mt-5">
<div class="row">
<canvas id="myChart"></canvas>
</div>
<div class="row mt-5">
<butto
浏览 0提问于2018-03-09得票数 0
回答已采纳
1回答
我在Django应用程序中有图表2.9.3，它工作得很好。现在，我需要使用chartjs-plugin-注释将一个框添加到我的图表中，并且我遵循了所有步骤，但我无法让它工作。我使用了chartjs-plugin-注释v0.5.7，用于v2.9.3。控制台日志中没有错误。首先，使用chart.js和插件的脚本：
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script src="https://cdn.jsdeli
浏览 2提问于2022-04-11得票数 1
回答已采纳
是一个用于的缩放和平移插件
可以调用chart.resetZoom()以编程方式将缩放重置为默认状态。参见。
HTML：
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<button id="reset_zoom">
Reset zoom
</button>
JavaScript：
var ctx
浏览 3提问于2017-06-15得票数 5
回答已采纳
1回答
使用ChartJS可以强制图表显示每个数据集的X轴标签吗？下面我尝试用图表js库复制瀑布图。如您所见，数据集中的每个条形图都没有标签。能让他们开机吗？
var ctx = document.getElementById("myChart").getContext('2d');
const dat = {
datasets: [
{
label: 'Purchase Price',
data:
浏览 5提问于2020-05-08得票数 0
回答已采纳
我是图表公司的新手。我正在努力向榜样学习。我用CSV数据创建了下面的HTML页面，这些数据应该使用ChartJS绘制.但它是空白的！出什么问题了？
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
浏览 1提问于2020-05-14得票数 0
4回答
我想在我的Laravel项目中安装Chart.js。使用npm，Webpack的配置，并通过一些Chart.js示例查看我的索引页面。在我的第一次尝试中，我在浏览器中得到了这个错误。也许我没有正确配置webpack？
Uncaught :图表未在(索引)：134处定义
因此，我复制并粘贴了我在Chart.js文档集成中发现的这个要求。
require(['path/to/chartjs/dist/Chart.min.js'], function(Chart){
var myChart = new Chart(ctx, {...});
});
我在npm run de
浏览 14提问于2020-02-07得票数 3
1回答
我有一个用chartjs创建的甜甜圈图表。当我悬停在甜甜圈的任何部分时，我想将鼠标光标显示为“指针”。我该怎么做？以下是我的代码
<canvas id="myChart" width="50" height="40"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script type="text/javascrip
浏览 15提问于2021-06-07得票数 0
回答已采纳
我试图在我的视图上显示一个简单的图表(Codeigniter)，但是它没有出现。
有人能告诉我我错过了什么吗？
感谢你对此的帮助。
<div class="container">
<h2>This is a sample — Line Chart</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript"
浏览 5提问于2017-03-29得票数 4
回答已采纳
我已经看过所有关于这个问题的帖子了，但我无法解决它。
我的图表线图很好。我正在尝试更新它(添加数据)，但是我被困在chart.data.labels.push(标签)上，因为它在控制台中声明对象是未定义的。然而，在控制台上，在前面的行中，我编写了对象的id，它是正确的，因此它有引用。
有什么想法吗？
图表是创建精细的
$(function () {
LoadChart();
});
function LoadChart() {
var ctx = document.getElementById('myChart');
var myChart = new
浏览 0提问于2020-03-03得票数 2
回答已采纳
我试图使用axios来获取图表的数据，但是我不知道如何使它出现在画布上，我可以看到console.log上的值如下所示
，我不太确定发生了什么，下面是我的代码：
mounted(){
const ctx = document.getElementById('myChart');
let myData = [];
const myChart = new Chart(ctx,
{
type: 'line',
data: {
labels: [....],
datasets: [{
data: this.
浏览 7提问于2022-06-15得票数 0
? 我在甜甜圈图表中渲染了文本，我使用的是ChartJs。但是我找不到改变文本字体颜色的方法。 Chart.pluginService.register({
beforeDraw: function(chart) {
if(chart.canvas.id === "myChart") {
var width = chart.chart.width,
height = chart.chart.height,
ctx =
浏览 34提问于2019-06-05得票数 0
回答已采纳
2回答
我目前正在探索Angular2与TypeScript的结合，我希望在我的应用程序中包括Chartjs模块。在中，将向您展示如何使用通用的canvas标记来完成它：
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {[...]});
</script>
我
浏览 3提问于2016-04-26得票数 1
回答已采纳
function chartJS_shortcode(){
?><canvas id="myChart" width="400" height="400"></canvas><?php
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar'
浏览 5提问于2022-07-10得票数 0
我想为chart.js创建一个短代码，当我在页面中添加这段没有函数的代码时，它工作得很好，但是，当我在fuction.php中添加这段代码时，它会破坏站点。我已经试过我的方法了。
function chartJS_shortcode(){
?><canvas id="myChart" width="400" height="400"></canvas><?php
<script>
const ctx = document.getElementById('myChart').
浏览 3提问于2022-07-12得票数 0
我正在使用chartjs绘制折线图，可以成功绑定onHover，但无法绑定touchmove。在chartjs文档(https://www.chartjs.org/docs/latest/general/interactions/events.html#event-option)中，我找不到绑定touchmove的方法。 const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: "line",
data,
浏览 19提问于2021-03-24得票数 0
我已经在我的angular 6+项目中使用了ChartJs，但是chartjs-plugin-crosshair在我使用的时候不起作用。我使用的是ChartJs 2.8.0。 这是图表的ts文件。 非常感谢。 import { Component, OnInit } from '@angular/core';
import { Chart } from 'Chart.js';
@Component({
selector: 'my-app',
template:`
<div>
<
浏览 17提问于2019-10-03得票数 0
回答已采纳
当点本身的值为0时，我想隐藏或更改它的颜色。
以前版本的ChartJS您可以通过以下代码访问这些point元素：
var myChart = new Chart(ctx).Line(data);
for (var i = 1; i <= data.datasets[0].data.length - 1; i++)
if (data.datasets[0].data[i - 1] === data.datasets[0].data[i])
myChart.datasets[0].points[i].display = false;
示例：
我使用的是chart.js 2
浏览 2提问于2018-02-08得票数 1
回答已采纳
我正在使用React ChartJS 2创建一些图形，但我想在它们的顶部显示一个标签，当我将鼠标悬停在它们上面时，它会显示百分比和实数。我发现您可以使用options对象上的上下文来做类似的事情。 var options = {
tooltips: {
enabled: false
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let datasets = ctx.chart.data.datasets;
if (dataset
浏览 19提问于2019-01-04得票数 3
回答已采纳
2回答
我创建了两个x，y数组，然后使用这些数组执行了两个图表。我只想用图红色写一些文字。我想使用(x，y)坐标来确定文本区域。我试着用Chartjs的全球插件，但它导致写文字所有的图表。我只要求发一张图表。我无法在脚本中成功地使用Chartjs插件。请帮帮我。
这是我的代码：
<!DOCTYPE html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<html>
<head>
<meta name=
浏览 0提问于2019-05-02得票数 2
回答已采纳
? 我正在尝试将Chartjs添加到我的angular应用程序中。它不会加载图形中的最低值 我的代码 <canvas id="myChart" width="100" height="100" ng-if=""></canvas>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [
浏览 11提问于2019-04-09得票数 0
回答已采纳
2回答
我需要你的帮助来学习如何动态实现从json文件到Chartjs的数据。我需要动态填充的字段是labels和data。
JSON File <<<
[
{
"EFICAZ_TAB_ITEM_ID":1,
"EFICAZ_PERCENTS":99
},
{
"EFICAZ_TAB_ITEM_ID":2,
"EFICAZ_PERCENTS":99
},
{
"EFICAZ_TAB_ITEM_ID":3,
浏览 0提问于2018-06-11得票数 0
我想增加以下内容的篇幅。请您编辑下面的代码以使这些元素更大：
标签文本大小(图表上方的NaCl和SalinityDrift框)数字本身以x、y、y2轴表示
剧本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></scr
浏览 2提问于2021-10-11得票数 0
回答已采纳
假设(unixTime，值)点的几个独立的时间序列。例如，CarSpeed和CarRemainingFuel。我想要创建一个多轴图(Y1轴用于CarSpeed，Y2轴用于CarRemainingFuel)。类似的问题不包括“时间”型x轴的情况。
下面是一个时间序列图的工作示例。它需要对多轴情况进行扩展。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdnjs.cloudf
浏览 3提问于2021-10-09得票数 0
回答已采纳
1回答
由于每个chartjs版本已经改变，数据集值显示在bar本身没有working.The现有的代码已经与V1.0.2一起工作。参考：
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx
浏览 10提问于2016-07-28得票数 0
1回答
我试图在我的chart.js顶部显示总金额；我试图使用datalabel插件，但我不确定为什么它不显示标签，我没有收到任何错误，以下是我的代码：
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id
浏览 17提问于2021-05-19得票数 0
回答已采纳
在启用了chartjs-plugin-datalabels的情况下，我在Chart.Js中有一个甜甜圈图表。只有当字符串适合图表的分段时，我才能将字符串写入分段中？ 目前，我的代码如下所示： let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'doughnut',
data: {
labels: ["Red", "Blue", "
浏览 11提问于2019-04-09得票数 2
回答已采纳
1回答
我想画一个单杠以上的垂直条(绿条)。我使用的是角为4的图表JS V2。
我找到了一些代码来画线，但它不能在角4中工作。
我也尝试过使用annotation，但它不起作用。添加注释的命令：npm安装chartjs-plugin-注释-保存
下面是我的代码，只绘制垂直条很好。有人能帮我画一条水平线吗。
答案：
安装npm install chartjs-plugin-annotation --save
然后是import 'chartjs-plugin-annotation'；
this.ctx = document.getElementById("myChart
浏览 2提问于2017-12-05得票数 3
我有奇怪的问题solve.When存在重复的值存在于数据数组的chartjs，我想忽略他们(不删除).Because如果我删除他们或设置null，那么他们将看起来不完全我want.Here低于我想要实现的
data: [500, 500, 2424, 2424, 4111, 4111, 80, 5555, 5555, 6811]
当下一个值重复时，不知何故它应该在下一个值和前一个值之间，我想不出来，也不知道从哪里开始。
这里的代码是：
var ctx = document.getElementById("myChart").getContext(
浏览 15提问于2020-05-29得票数 1
回答已采纳
1回答
如何在chartjs中显示条形图
、、、、
我用chartjs创建了一个图表，如何显示水平显示条？ ? <canvas id="myChart"></canvas>
</div>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
浏览 16提问于2020-08-19得票数 0
回答已采纳
1回答
Yii2无法查看图表
、、、
我使用的是，2amigOS。下面是我的代码
use dosamigos\chartjs\ChartJs;
ChartJs::widget([
'type' => 'pie',
'id' => 'structurePie',
'options' => [
'height' => 200,
'width' => 400,
],
'data' => [
浏览 4提问于2020-04-17得票数 0
我正在使用chart.js version 2.2.1在我的angular 2应用程序。
当调用Chart的构造函数时，会显示一个错误：
Supplied parameters do not match any signature of call target。npm start命令不编译应用程序。
var myChart = new Chart(ctx, {
type: this.chartType,
data: chartData,
options: chartOptions
});
利用上述方法，在浏览器中绘制出图表。
(但我必须: 1)注释创建图表的代码，2)运
浏览 1提问于2016-08-02得票数 0
回答已采纳
我尝试在api的版本7中使用chartjs中的插件缩放。我希望能够在拖拽区域的选择完成时进行缩放。缩放后，我希望能够移动图表以达到其他值。
我已经尝试了v4，v5，v6和缩放插件，但结果总是一样的:当我试图选择拖拽区域时，所有的图表移动，它移动得令人难以置信的快，它开始使用它很困难。
也许我没有正确使用插件，但是我尝试了一些其他的配置，结果仍然是一样的。
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
type: 'li
浏览 3提问于2017-10-17得票数 1
1回答
我有一些用Chartjs和Laravel图形表示的数据，但是我想让这些数据中的一些被不同的着色，因为它们不在特定的范围内。我该怎么做？
这是我创建图表的代码
<div>
<canvas id="myChart" width="400" height="200"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@php
$labels =
浏览 5提问于2022-02-26得票数 0
我已经阅读过类似的堆栈溢出问题，并检查我没有犯同样的错误。我不认为这是URL或视图的问题，因为Django-调试-工具栏显示它正在选择父模板，但是子模板并没有扩展它。
我的项目结构如下：
project
templates
base.html
index.html
apps
charts
templates
chart_base.html
charts.html
项目/模板/base.html
<body>
{%
浏览 1提问于2018-03-09得票数 0
回答已采纳
1回答
我正在使用chartjs2.0构建图表。我指定我的帆布尺寸是200 x 200。然而，这幅画却是1218x1218.有人知道为什么会这样吗？这是我的小提琴：
我的html：
<canvas id="myChart" width="200" height="200"></canvas>
我的javascript：
var dateArray = ['1', '2', '3', '4'];
var data_array = ['10', '
浏览 2提问于2016-06-08得票数 0
回答已采纳
我正在尝试为Javascript库设置RequireJS require.config()。我将此配置用于、和
require.config({
paths: {
'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min',
'chart': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart',
'streaming': '
浏览 1提问于2018-02-23得票数 4
回答已采纳
我对chartjs是如此的新手，并且正在和laravel一起做这个项目。现在，我需要创建一个不需要刷新就能自动更新的图表，它的数据来自mysql数据库。我在网上找到了这样的代码：。我尝试执行此代码，但输出总是失败。
// used for example purposes
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// cr
浏览 0提问于2017-07-30得票数 1
请您帮助我设置显示图表所需的使用chart.js与金字塔网络框架(变色龙模板)。
在
<head>
我指向从chartjs.org下载的文件：
/static/npm/node_modules/chart.js/dist/Chart.css
和
/static/npm/node_modules/chart.js/dist/Chart.js
我在模板中尝试下面的示例，但是没有显示图表：
<canvas id="myChart" width="400" height="400"></canvas>
<scri
浏览 0提问于2019-08-21得票数 0
回答已采纳
2回答
当在chartjs v2中的绘图区域上盘旋时，我试图呈现一条垂直线。我有一个基本的工作版本，但我还没有弄清楚如何在每次画线时移除这条线(老的线条只是停留在周围)。
下面是一个有用的示例-
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green",
浏览 1提问于2016-05-01得票数 7
回答已采纳
1回答
我正试图在我的图表的轴上添加/绘制箭头。(所以他们看起来更像)
我试着去看医生，但是我没有在天平部分找到任何选择。我试图通过使用注释插件来实现它，但是它是，因为在条形方案中，箭头在x轴上似乎是有限的，而且我没有找到使它溢出的方法。
我发现一个人有类似的问题，但这是在上
我需要做一个自定义秤类吗？
下面是我当前的测试实现
const data = {
labels: ["Label1","Label2","Label3","Label4"],
datasets: [{
label: 'First Data
浏览 7提问于2022-05-12得票数 3
回答已采纳
2回答
我尝试在chartjs 的官方站点上实现气泡图。
但是它只显示没有任何数据点的网格。它也不显示任何错误。
这是密码
var ctx = document.getElementById("myChart");
var data = [{x:10, y:10, r:10}];
// For a bubble chart
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: {
scales: {
yAxes: [{
浏览 5提问于2017-07-20得票数 2
回答已采纳
我正在为一个项目的图表页工作，我的客户不希望我使用npm，bower或CDN。因此，我的问题是，在不使用这些选项的情况下，如何使用chartjs库？
我试着用这个方法：
var Chart = require(['../chartjs/Chart.js']);
var ctx = document.getElementById("bar-chart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "
浏览 0提问于2018-03-29得票数 0
回答已采纳
3回答
我对电子很陌生，所以我正在学习基本的构型。
所以，我想在我的电子应用程序中实现chart.js。问题是:在我的主页上，图表只是一个空白.但是通过查看html检查器，我可以看到创建的画布。
我已经做的事：
我已经安装了带有().的chart.js，我们可以在正式的chart.js文档中找到它
我的感觉告诉我，我在调用图表库时做错了什么，或者类似的事情。我的代码如下：
<canvas id="myChart"></canvas>
<script>
const { chart } = require('electron-chartjs&#
浏览 16提问于2020-12-13得票数 3
回答已采纳
1回答
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orang
浏览 0提问于2018-08-27得票数 0
回答已采纳
1回答
我使用下面的配置用ChartJS绘制了一个图表
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Voltage Fluctuation',
浏览 3提问于2017-09-03得票数 3
回答已采纳
我正在使用chartjs构建一个图形，但我需要它来显示堆栈a2，b2，c2的名称。
chartjs 3.2.0的插件不工作
<html>
<head>
</head>
<body>
<canvas id="myChart" width="668" height="284" style="display: block; box-sizi
浏览 8提问于2021-05-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
