我一直试图让Chart.js 2.2.1版本显示一个简单的图表使用教程从另一个网站..。即使有了最基本的数据，什么也不会显示出来。如果我使用小型化的版本，这个版本就没有CDN，没有，zip。
括号中的版本1.0.2很好，但是2.2.1版出现了很多jshint错误。
我甚至在JSFiddle上尝试过，但仍然没有最新的诗句。
作为新的javascript，我想知道是否有明显的东西我错过了，否则我将继续使用一个旧版本。
这是工作代码。我只添加了Chart.js文件的开头。
<canvas width="300px" height="300px" id="
浏览 2提问于2016-08-14得票数 2
回答已采纳
我正在研究甜甜圈chart.js。这里我展示了所有的传说，如果值是0，那么它也会显示。我需要给每个图例一个链接，我可以如何实现这一点。在chart.js文档中没有这方面的信息。
这是我的密码
<body>
<div id="canvas-holder">
<canvas id="chart-area" width="500" height="500"/>
</div>
<div id="js-le
浏览 5提问于2015-09-10得票数 1
回答已采纳
我正在使用Chart.js。当我使用设定值时，图表显示正确。但是，当我使用变量时，图表不会显示，并且控制台中出现错误。我不理解错误消息。 图表如下： function showChart(chartName, xAxis, yAxis){
alert("chartName: " + chartName);
alert("xAxis: " + xAxis);
alert("yAxis: " + yAxis);
//Charts
//Select the chart element
const ctx
浏览 105提问于2021-07-05得票数 0
我在一个freemarker模板中使用chart.js。但是在使用chart.js的标签参数时有一个问题。
labels: {
position: "outside",
render: (args) => {
return `${args.label}`;
},
textMargin: 10,
}
问题是当我使用${args.label}时，它给出了一个ftl错误。在ftl中使用这个有什么解决方案吗？
浏览 12提问于2021-05-19得票数 0
1回答
我已经研究了几个小时，试图弄清楚这个问题。我使用ChartJS并尝试构建折线图。似乎我的图表和它的图例之间没有差距，需要在它们之间添加更多的空间。 应该是这样的： ? 但是我得到了这个(参见我的代码片段) 下面是我的代码： new Chart(document.getElementById("line-chart"), {
type: "line",
data: {
labels: ["Label1", "Label2", "Label3",
浏览 16提问于2020-04-17得票数 1
回答已采纳
我正在尝试使用chart.js测试饼图。我在chart.js文件中得到'cannot read property of 'length‘和'initialize’。我尝试了所有的选项，但找不到问题所在。
jsfiddle中的代码
pieChart.js文件包含以下代码。
var pieData = [
{
value: '25',
label: 'Java',
color: '#811BD6'
},
{
value: '10'
浏览 0提问于2016-07-29得票数 0
我有一个使用Chart.js构建的动态折线图，最多可以有19个数据集。我动态地将数据输入到数据集中(效果很好)。我遇到的问题是，如果我的数据集少于19个，这些未使用的数据集仍然会显示图例。我曾经在Chart.js 2.6.0的选项列表中使用过这个函数：
legend: {
labels: {
filter: function(item, chart) {
return !item.text.includes('unused');
}
}
}
但这不再适用于Chart.js 3.2.0。
有没有人知道如何在Chart.js 3.2.0中使用这个函数？
这就是我目
浏览 21提问于2021-05-18得票数 0
2回答
有谁知道如何在反应图2中获得多个x轴标签吗？我看到了几个例子，人们正在使用chart.js，但没有反应-图表-2。我怀疑react chartjs-2在涉及到options.scales.xAxes时的表现可能略有不同。
我使用的是chart.js v3.6.1 &react-chartjs-2v4.0.0
我找到了一个使用的chart.js，但没有使用react chartj-2，它代表了我想要的。下面的代码，我调整了使用Reacti-chartjs-2。标签的显示不正确，即使我没有修改原始工作示例中的“选项”或“数据集”。
import React from 'react&
浏览 8提问于2021-12-02得票数 1
回答已采纳
1回答
我想看看Chart.js是否可以将图例文本从默认的“右”更改为“左”。我还需要能够在usePointStyle的两边放置两种类型的数据。我目前正在使用ReactJS。
这就是我目前所拥有的：
我需要Chart.js将图例文本呈现如下：
我试过在chart.js上查找整个文档，但一无所获。
下面是我的代码片段：
<Doughnut
width={120}
height={100}
data={tradeFileNames}
options={{
cutoutPercentage: 55,
elem
浏览 0提问于2020-04-09得票数 1
我正在使用Chart.JS V2，无法找到一种方法来更改类别标签(演示中的动物、科学和文化)的字体大小：
代码和演示下面的和。
谢谢。
jQuery(document).ready(function($) {
new Chart(document.getElementById("so"), {
type: "radar",
data: {
labels: ["Animals", "Science", "Culture"],
datasets: [{
l
浏览 1提问于2017-01-26得票数 0
回答已采纳
使用Chart.js 1.x，我可以创建一个饼图，并自动分配颜色：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.1.1/Chart.js"></script>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("
浏览 1提问于2016-10-05得票数 45
回答已采纳
我有一个chart组件来创建新的图表：
import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
import Chart, { ChartConfiguration } from 'chart.js/auto';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: [&
浏览 2提问于2022-06-23得票数 0
我的基本图表包装器如下所示(结合使用ReactJS 16.8+和ChartJS 2.0+)
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Chart from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { makeStyles } from '@material-ui/styles';
浏览 21提问于2019-08-02得票数 3
2回答
Django模板未执行js函数
、、、、
我有一个如下所示的django模板：
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.flot.js"></script>
<!--<script src="c:/src/project/scraper/co
浏览 1提问于2011-08-28得票数 4
回答已采纳
我有以下代码来使用Chart.js v2.1.3创建一个图形：
var ctx = $('#gold_chart');
var goldChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'I want to remove this Label',
data: prices,
pointRadius: 0,
浏览 8提问于2016-05-13得票数 174
回答已采纳
首先，如果我的问题与其他问题略有相同，我向您道歉。我搜索了一个解决方案，找到了3个类似的问题，但它们都不适用于我的情况，因为我找到的示例使用了Chart.js v1。
我看到了一个使用scaleLabel中的函数来格式化数字的示例，如下所示：
var options = {
animation: false,
scaleLabel: function(label){
return '$' + label.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
}
浏览 3提问于2016-06-04得票数 0
我想用Chart.js 2.1.6绘制饼图
我的代码：
<script src="~/Plugin/Chart.js 2.1.6/dist/Chart.min.js"></script>
<canvas id="mychart"></canvas>
var data = [
{
value: 300,
color: "#F7464A",
highlight: "#FF5A5E",
浏览 4提问于2016-07-05得票数 3
回答已采纳
我正在尝试使用Chart.js重构一个旧的Flex应用程序，我想复制这个线性/对数轴。注意yAxis上干净的最小间距。
这是我的Chart.js代码。
var mtbsoData = [];
var mtbsoLables = [];
for (let i = 0; i <= 10; i++) {
mtbsoData.push(i * i * i * i);
mtbsoLables.push(i.toString());
}
var ctxMtbso = do
浏览 0提问于2018-06-21得票数 3
在之前，我使用ChartJS和相结合来获得TypeScript支持的所有类型。我使用Webpack和TypeScript的最小示例如下：
package.json:
{
"devDependencies": {
"@types/chart.js": "^2.9.31",
"ts-loader": "^8.1.0",
"typescript": "^4.2.3",
"webpack": "^5.30.0",
&
浏览 3提问于2021-04-04得票数 6
回答已采纳
我使用带有typescript + react的react-chartjs-2，并试图创建一个简单的条形图，但我的浏览器控制台抱怨width未定义。我不太确定下面是否有什么我没有配置的东西？ 浏览器控制台错误： Uncaught TypeError: Cannot read property 'width' of undefined
at n.draw (Chart.js:15474)
at Object.draw (Chart.js:7231)
at $t.draw (Chart.js:9825)
at $t.render (Chart.js
浏览 12提问于2020-03-30得票数 0
1回答
图表不显示
、、、
我试着在我的网页中使用Chart.js，但是图表不会出现，在chrome控制台中也没有错误代码。我使用的是Chart.js v2.7.2。 我尝试了所有的解决方案，但都不起作用，我还复制了chart.js文档中的代码。怎么了？ var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "
浏览 19提问于2019-09-07得票数 0
我的雷达图表将不会显示数据值时，徘徊在一个点。Chart.js 2.8.0
<script src="./vendor/chart.js/Chart.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>
<script>
new Chart(document.getElementById("radar-chart"),{
type: 'radar
浏览 1提问于2019-08-06得票数 3
回答已采纳
我正在尝试在chart.js中创建包含组的堆叠条形图。但我不希望标签出现多次，而是只出现一个唯一的标签。 下面是数据集： datasets: [
{
label: 'First Label',
data: [1,2,3],
borderColor: 'red',
backgroundColor: 'red',
stack: '1'
},
{
label: 'Second Label',
data: [1,2,3],
borderColor: 'green',
浏览 5提问于2021-04-18得票数 0
1回答
我正在努力找出如何使用Chart.js将标签绘制到正确的位置
var json = {
"competition one": [
{
"date": "2015-05-20",
"position": 37
},
{
"date": "2015-05-21",
"position": 22
}
],
&
浏览 7提问于2015-05-26得票数 3
回答已采纳
嗨，我在做天使图。在这里，呈现的图表的数据在date format ("dd-mm-yyyy")中，来自date，我必须获取year并在图表中显示它。但我不确定，如何得到，只有从提供的数据year。在图表中，x轴代表特定年份的份额，y轴代表百分比.在发布的图片中，您可以看到y轴上的一个红色框，它显示了完整的date，而我只想在y轴上显示年份。请帮帮我。
html：
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ang
浏览 1提问于2017-02-07得票数 0
回答已采纳
我试图构建一个chart.js散点图，在这个散点点上，工具提示会显示特定的到那个点的标签。
所以每个数据点都有x和y值，也有标签。
到目前为止我有
var ctx = document.getElementById('myChart').getContext('2d');
var scatterChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [{
labels: ["Label 1","Lab
浏览 2提问于2017-06-20得票数 14
回答已采纳
我不是JavaScript开发人员，我想知道如何将对象数组(从WebAPI调用中获取)转换为适合Chart.JS的数组。 到目前为止，我的代码(可以正常工作)如下所示： <canvas id="line-chart" width="800" height="450"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<sc
浏览 43提问于2019-09-28得票数 0
标准设置I有：
"dependencies": {
"chart.js": "^3.9.1",
"next": "12.2.3",
"react-chartjs-2": "^4.3.1",
},
import { useRouter } from 'next/router'
import { Line, Chart } from 'react-chartjs-2'
import { Cat
浏览 4提问于2022-11-13得票数 -1
2回答
chart.js正在创建一个甜甜圈图，如下所示：
<div id="chartContainer" style="height: 320px; width: 320px">
<canvas id="hoursFEContainer"></canvas>
</div>
我需要chart.js如下(从npm下载)：
require('chart.js');
然后在相关函数中实例化Chart.js如下：
var distinc
浏览 5提问于2017-03-21得票数 7
1回答
我使用Chart.js和堆栈组条形图。
问题是数据包含零值，这些值显示在工具提示中，这使得阅读变得更加困难。我怎么才能把它们移走？
截图：
编辑1
这是应该返回图表选项的代码。
getChartOptions(): import('chart.js').ChartOptions | undefined {
return {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked',
},
tooltips: {
浏览 3提问于2021-01-05得票数 0
Autocolors插件并不像图表所期望的那样工作。它不指定不同的颜色。
const autocolors = window['chartjs-plugin-autocolors'];
var options = {
type: 'line',
data: {
labels: ["0", "1", "2", "3", "4", "5"],
datasets: [{
label: '# of Votes',
浏览 4提问于2022-11-29得票数 1
回答已采纳
1回答
我正在从一个JSON文件创建一个Chart.js ()。
但我是用"checkbox“这样做的，这个想法是点击desire元素，它将在同一画布中显示不同的数据。
我想我几乎有，但我有一个问题，当我想要保存的数据。正如你在这里看到的，使用console.log我可以通过循环看到数据，这很好，但是当它试图将数据保存到数据对象中时，这是错误的。
chart.js:25 CSN08101
chart.js:26 rgba(255, 99, 132, 0.2)
chart.js:27 rgba(255,99,132,1)
chart.js:25 CSN08112
chart.js:26 rgb
浏览 0提问于2017-03-31得票数 0
嗨，我在chart.js上有这个配置的渲染器，我不明白为什么
这是chart.js的版本
/*!
* Chart.js
* http://chartjs.org/
* Version: 2.7.1
*
* Copyright 2017 Nick Downie
* Released under the MIT license
* https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
*/
我用这个函数生成我的图表，我不知道如何解决我的问题，谢谢你的帮助。
new Chart(document.g
浏览 5提问于2022-03-06得票数 0
回答已采纳
1回答
我正在尝试绘制一个折线图，它应该显示一条部分实线和部分虚线(以表示实际数据和预期数据)的线条。我发现这个示例在2.0.0-alpha版本上运行得很好
var lineChartData = {
labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
datasets: [{
label: "My First dataset",
data: [1, 8, 3, 4, 2, 3, 4],
浏览 0提问于2016-05-23得票数 6
4回答
我正在尝试配置我的API，使其适用于Chart.js。 我的API包含 {
"Food": 900,
"Shopping": 0,
"Travel": 600,
"Health": 0
} 它应该是这样的 [
{
data:900,
label: 'Food'
},
{
data: 0,
label: 'Shopping'
},
{
data: 600,
浏览 34提问于2019-01-25得票数 1
回答已采纳
在这里，我使用了chart.js和chart.piecelabel.js向饼图中添加了一个段...但是没有添加箭头。
options: {
pieceLabel: {
render: function (args) {
const label = args.label,
value = args.value;
return label + '\n' + value;
浏览 0提问于2018-09-05得票数 0
我想更改"multiTooltipTemplate“宽度的”标签“。但我只为以前版本的chart.js找到了解决方案。
你能告诉我如何把它转换成：
multiTooltipTemplate: "<%%=datasetLabel%> : <%%= value %>",
到Chart.js的版本2
现在，我可以选择这样做：
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
浏览 0提问于2016-05-11得票数 5
回答已采纳
我是chart.js的新手，对下面的内容有一点了解： <script>
window.onload = function ()
{
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
// labels: ['1',
浏览 17提问于2021-06-18得票数 0
1回答
我在https://www.flottefeger.ch/charts.html上有一个可用的chart.js，我正在尝试使用Chart.js将单击事件添加到我的折线图中。我可以提醒弹出两个值。但我还需要一个参数。数据集中标签中的那些。 看起来是这样的： 但现在我的问题是，我如何才能获得我点击的是哪个图表？我是说标签上的价值？ 在我的示例中，它可以是Timmy或Siri var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
浏览 32提问于2020-12-30得票数 0
回答已采纳
3回答
我正在尝试在Angular 4.0中使用ng2图表，我希望通过使用chart.js来实现相同的功能：
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
...
<canvas id="myChart" width="400" height="400"></canvas>
<script
浏览 2提问于2017-06-14得票数 2
回答已采纳
我需要用Chart.js画一个有两条线的图表。
这行中的每一行都有不同的标签集。
即图1：
1 -> 2
2 -> 4
3 -> 8
4 -> 16
图表2：
1 -> 3
3 -> 4
4 -> 6
6 -> 9
下面的示例显然不起作用，因为它使用了chart1中的标签。但是有没有可能用Chart.js实现这一点呢？
var config = {
type: 'line',
data: {
labels: [1,2,3,4,5],
浏览 3提问于2018-03-26得票数 4
4回答
我用chart.js绘制了一张线图。对于标签和数据集，我从数据库中获取值。我对chart.js及其强大的库非常陌生，但我无法完全理解它。我想画倍数的水平线。就像数据集的平均值，标准差，最小和最大。我在这里尝试过堆叠式的问题，但这些都是错误的，或者我可能无法理解工作。这是我的chart.js代码
function display_graph(id, label, data) {
var ctx = document.getElementById(id);
var data = {
labels: data.labels,
datasets: [
{
浏览 4提问于2017-03-09得票数 42
回答已采纳
我正试着做一张如图所示的图表。主要的问题是我无法用chart.js制作这种图表。可以用chart.js制作这个图表吗？我有两个数据集，第一个是收入值，第二个是费用值。所以我必须把收入值放在0-X轴上，费用放在0-x轴以下。差别将显示在那条线图上。
到目前为止，我尝试的是：
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May', '
浏览 6提问于2020-08-18得票数 0
回答已采纳
我有一个计算器，它从两个下拉列表中提取值，并通过一个数组运行它们，以计算某个条件将结束的几率。我让它正常工作，并以文本格式显示结果。我的老板现在想让我以条形图的形式显示结果。我选择使用chart.js，可以让图表在图表中输入实际数据，但需要从所选下拉列表的结果中提取数据。
由于某些原因，jsfiddle中的计算器不能正常工作，但在我的网站上可以正常工作。不知道为什么。
下面是我用于chart.js的脚本
<script src="js/Chart.js"></script>
<script src="js/Chart.HorizontalB
浏览 1提问于2015-07-18得票数 0
1回答
我创建了一个新项目，并尝试使用ChartJS2 实现图表。
app.module.ts
...
import { ChartModule } from 'ng2-chartjs2';
@NgModule({
...
imports: [
ChartModule
],
...
})
export class AppModule {}
index.html
<script src="../node_modules/chart.js/src/chart.js"></script>
<!--<script s
浏览 3提问于2016-10-19得票数 0
回答已采纳
4回答
我正在使用Chart.js，并试图将饼图上的标签移出饼区(参见红色X)：
这是我现在的代码：
<div class="container" id="pieContainer">
<h4 class="title">Title</h4>
<center><canvas id="pie"></canvas></center>
</div>
<script>
浏览 3提问于2016-03-24得票数 5
回答已采纳
我目前对Chart.JS有问题，特别是在销毁多个图表方面。
设置：
我通过API调用地理数据服务，然后在下面的图表上显示单击多边形的统计信息。我尝试以编程方式在一个名为chartPropertyArray的对象数组中分配这些图表和相关数据。每个数组对象都包含变量、数据和图表变量(请参阅下面的对象结构)。
事情是这样设置的，因此每个Chart.JS画布对象(varChart)和Chart.JS所需的关联上下文信息(ctx)都是这样设置的(参见下文)。
问题：
因为每个图表必须分配给要销毁的唯一变量，所以图表被放置在chartPropertyArray中相应的对象中。
我试图遍历这些对象并销毁数组
浏览 2提问于2021-04-01得票数 1
回答已采纳
我正在尝试使用HTML canvas设置一个Chart.js，我已经在网上找到了一些有效的示例，但现在我正在尝试自己创建，我收到了一个错误消息。 具体的错误消息是： TypeError: t is null[Learn More]
acquireContext https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js:10
construct https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js:10
t https://cdnjs.cl
浏览 19提问于2019-02-23得票数 1
回答已采纳
1回答
我在页面上使用chart.js，并且希望使用存储在SQL数据库中的数据作为chart.js的数据。
下面是chart.js片段的样子：
// Chart Data
var chartData = {
labels: ["Jänner", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "Novembe
浏览 5提问于2022-01-27得票数 0
回答已采纳
当我在潜水中使用ng控制器=‘DoughnutCtrl’时，它会给出错误。
错误: ng:areq参数'DoughnutCtrl‘不是函数，未定义
我的chart.js
'use strict';
angular.module('portfolioApp',['chart.js']).
controller('DoughnutCtrl', function ($scope)
{
$scope.data = [[
{
value: 80,
color: "#949FB1&#
浏览 6提问于2015-10-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
