在chartjs v2中，是否有办法将轴上的数值改为分类文本标签（例如低、中、高）？如果只想更改记号标签，请使用记号的回调属性。比如说 ... options: { scales: { yAxes: [{ ticks: { callback: function(value) { if (value === 20) return 'Low'; else if (value === 50)

我有一张用chart.js制作的折线图。它有正值和负值。我想用背景色“填充”它，但要填充到图表的底部，而不是0 阅读文档后，我想您需要将fill属性设置为'start'。但这似乎不起作用 。下面是一张解释的图片 如果有人遇到这个问题，不要做我。检查您使用的是2.6+，而不是像我一样使用的2.4 根据： 2先前版本2.6.0，边界值为“零”、“顶部”、“底部” （已弃用）

我需要chart.js和angular 8的深入功能。我可以得到一个基本的饼图工作，现在需要一个深入的图表。下面是我的代码 export class PieChartComponent implements AfterViewInit { PieChart=[]; constructor() { } ngAfterViewInit() { console.log(this.pieElementRef+"VIEW initialize"); this.PieChart = n

我的标签与我的横条的左侧对齐。我想让它们居中，但我不知道如何做到这一点。我查阅了文件，但找不到答案。有人知道如何把它们放在中间吗 检查您的偏移量是否为true或false并共享您的代码。如果没有代码，我们无法在此处共享您的代码，因此我们可以在代码中清除您的问题。看起来您有两个数据集（其中一个数据集全部为null/0），这导致了对齐问题。但由于您没有提供代码，因此无法调试。因此，我投票决定结束。@timclutton是正确的。图表是在一个带有空数据集的代码模板中初始化的，我没有使用它，而是在列表中

我正在使用react-chartjs-2，它是围绕chart.js 2构建的。 Chartjs已经推出了第3版，但react Chartjs尚未为Chartjs-3开发包装器 我想跳过分组条形图中的空值，否则会留下空白。chartjs-3中添加了一个跳过空值的选项，但chartjs-2中没有。使用chartjs-2时，绘图如下图所示，空白值为空。 因此，我使用这个提交更改并对chartjs-2.9.2进行相同的更改。条形宽度已增加，以填充空值区域，但它向右移动并重叠，如下所示。为什么会这样？任

我已经尝试了许多方法来解决这个问题，但不管我传递给Chartkick实例的值是什么，我总是在px中获得生成的画布的高度 我树立了一个榜样 如果您尝试拖动以展开/缩小预览窗口，您将看到我的意思 标准Chart.js图表在宽度和高度两个方面都会调整大小，但Chartkick图表不会 我测试过的一些方法包括： 给出了一个%值，没有任何变化高度仍然停留在300px 给出了一个vh值，这实际上调整了图表的大小，但我对窗口的高度不感兴趣 给出了一个vw值，对于前一种情况，即使在这里也会发生一些事情。。。图

我正在使用来实现一个折线图。此图表的X轴有许多点，例如整数范围1到200。X轴上有这么多点会导致显示时出现问题： 是否可以“合并”标签，以便我可能只显示1、10、20？这只会影响标签，而不会从打印线本身删除点。我所做的是在为标签生成数组时，检查I%10===0其中I是标签的索引，如果为真，则将标签添加到数组中，如果为假，则将空字符串添加到数组中 也许不是最干净的方式，但它是有效的

是否可以在chartjs中仅隐藏某些数据集图例？我知道有可能把一切都藏起来 options: { legend: { display: false 简短回答：是的，这是可能的。不幸的是，这并不像开发人员所能做到的那么简单 如果您知道图例中显示的项目的文本值，则可以将其过滤掉。在阅读了Chart.js文档之后，我找到了一个部分，其中详细介绍了一个可用于“过滤掉图例项”的过滤功能，尽管该功能必须在父图表选项对象上设置，而不是作为数据集本身的选项： const chart=新

我必须在我的图表中添加公司设计。我的同事告诉我chartjs有一个添加徽标的功能，但我找不到这样的功能或属性 它到底是如何工作的？有一个自定义工具提示的选项 有关更多信息，请参见此处：在答案中添加实际代码。链接可能会断开或过时。举个例子就好了。

我正在尝试将一组点对象发送到一个数据集中，以便Chartjs使用它制作散点图。该数组在控制台中看起来不错，但我不认为它被传递到变量声明“scatterChartData”中 以下是Chrome日志中显示的阵列的第一部分： 0 : {x:“6”，y:“0.95”} 1. : {x:“5.77”，y:“0.97”} 2. : {x:“6.32”，y:“0.98”} 3. : {x:“5.85”，y:“0.97”} 4. : {x:“5.94”，y:“0.92”} 5. : {x:“6.67”，y:“

我在C#和Ajax调用中使用chart.js。我正在尝试开发我的第一个线条图。每一个数据点都有圆圈。但是，每个数据点都显示圆内的值。如何删除该值，使其仅为一个蓝点 我正在使用DataLabels库。昨天我尝试了很多选择，但无法删除线上的点数 这是我的折线图的完整功能：- function LoadChart5() { var processType = ""; var sdt = $("[id*=startDate]").val(); var e

我正在尝试用chart.js构建一个甜甜圈图表，但是图表容器比图表画布大，这使得围绕它设计东西变得更困难 有没有办法使图表和容器具有相同的高度和宽度 设置： var option = { rotation: 1 * Math.PI, circumference: 1 * Math.PI, responsive: true, aspectRatio:2, title: { display: false }, legend: { display: false },

我想在两侧为双水平条制作侧标签，如下所示： 有人能帮我知道怎么做吗，我是react和chartjs的新手 这一员额继续自： 以下是我的代码： 该数据如下： 图表数据 export const dataPasienKeluarMasuk = { type: 'bar', labels: [ [0, 1, 2, 3,4], // expect output 0 - 4 [5, 6, 7, 8, 9], // expect output 5 - 9 [10

如何在水平条中设置固定的行大小。我试过了 yAxes: [{ barPercentage: 1.0, categoryPercentage: 1.0 }] 但它调整了酒吧的大小，我需要固定的大小。 最理想的是具有固定行大小（条形图、标签）和独立于数据量（滚动条）的图表。我可以用chartJS实现它吗 谢谢。这是更新JS代码。它将固定水平条中的固定行大小 调整窗口大小时，行大小仍在更改。请添加“宽度：502px；”到.chartContainer css类。我已经更新了我的答案 v

我一直很难找到能够向我展示如何控制/自定义图表及其属性的所有可能功能的文档 我想知道我是否在水平条形图中显示数据，有没有办法让长标签文本换行？我的图形大小受该功能的影响，我找不到一种方法来包装标签文本 我还想知道是否有一个属性，以便我可以控制带条形图的实际宽度，而不影响垂直标签宽度。因此，我可以为垂直标签文本提供更多的空间，而为图形部分提供更少的空间 以下是我当前呈现图形的方式： barChartOptions: any = { scaleShowVerticalLines: false

我有多个基于时间的信息数据集，例如： { x: 1502007367658, y: 5}, { x: 1502007367663, y: 3}, ... 及 如您所见，这两个集合在x轴上不重叠 如何使ChartJ显示两条线，每条线的X值不同 目前，我有一个完整的重叠： 因为这是代码： // 7 Labels, for 7 data points, non linear this.chart.labels = [newDate(-4), newDate(-3), newDate(2), new

每秒钟我都在用新数据更新图表，其中标签是正确的unix时间戳。这里是我的x轴的选项 xAxes: [ { ticks: { maxRotation: 0, minRotation: 0, }, type: "time", time: { displayFormats: { second: "

这个例子非常偏颇，但它充分说明了我的观点。蓝线有一个很大的差距，所以11月的前2周有一堆外推数据。我想把鼠标悬停在红线上的点上，得到蓝线的相应数据。我找到了scale.getValueForPixelvalue，但它只获取比例中精确点的数据。无论这条线是什么，我都找不到对应的函数 有什么方法可以让我从一条直线上的任何一点获取外推数据吗？一种简单的方法是为onClick事件绑定画布，并使用以下代码，这里还有一个可用的fiddle-> 这在我的情况下不起作用。您正在脱离索引，该索引显然不适用于上图中

嘿，伙计们，我有一个问题：正如你们在屏幕截图中看到的，当你们在x轴上使用大量数据时，x轴上最后一个和第二个到最后一个日期之间的距离比其他分辨率要大。有人能用这样一个项目来测试一下是否每个项目都会发生这种情况吗？可能这就是Chart.js处理在x轴上放置更多元素的方式，但是我能做些什么吗 多谢各位

我的数据集有很多数据，因此在渲染时，它将如下所示： 正如您所见，标签几乎不可读。如何设置每个数据集之间的边距 我试着设置margin和padding如下，但这只会让事情变得更糟 scales: { xAxes: [{ ticks: { autoSkip: false, maxRotation: 9

有没有办法将使用chart.js制作的图表导出到Excel中？ 谢谢你的帮助 <canvas id="chart" width=600 height=600></canvas> const myChart = new Chart(document.getElementById('chart').getContext("2d"), { type: 'horizontalBar', data: { labels: ['

使用Chart.js的v2.0beta版 我在显示xAxes和yAxes比例标签以及设置yAxes最小/最大值时遇到问题 我需要以10为增量将yAxes刻度从-10到120…这在v1中非常容易做到，但我必须切换到v2.0才能反转yAxes…非常感谢您的帮助：） 尝试在JSFIDLE中设置，但无法使其工作，抱歉 这是我的线条对象： var chart = new Chart(context, { type: 'line', data: data, options: {

chartjs默认工具提示似乎显示数据不正确。无论我将鼠标悬停在哪个数据点上，工具提示标签始终显示“1月24日的一周” 我希望当鼠标悬停在“1月31日的一周”数据点上时显示“1月31日的一周”，当鼠标悬停在“上周”数据点上时显示“上周”。我错了吗 redraw=“true”您能提供一个复制此错误的小提琴吗？我会看看我能做些什么，Quince，但我认为这与动态更改x轴标签有关……我想我需要调用update（）或类似的东西。我有一个不同数据范围的切换：季度、月、周和日，因此当用户单击这些数据时

我想更改此图表的字体大小和边框颜色。因此我不知道怎么做，我试着把这些选项放在不同的地方，但似乎没有任何效果。我无法获得angular chart选项和chart.js选项之间绑定的逻辑，是否有一种通用的方法来操作它们 以下是指令： <canvas class="chart chart-line" chart-y-axes="axes" chart-data="data" chart-labels="labels"

我遇到了一个问题，图表中的最后一个泡沫被切断了。我需要一种扩展图表的方法，以便显示整个圆。我尝试了所有的方法，从在末尾添加额外的值到调整填充。似乎什么都不管用。不幸的是，气泡图上的图表JS文档也严重缺乏 var randomScalingFactor = function() { return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100); }; var randomColorFactor =

我想在ChartJS中制作一个饼图，每个部分都按照一定的百分比“填充”（使用不同的颜色）。假设饼图显示各种类别及其相对大小（维度1），那么我希望每个部分的部分填充显示每个类别的流行百分比（维度2） 请参见下面的示例。我试图勾勒出我想要的东西。这是一个饼图，有6个“类别”（分段），每个“类别”都有一个百分比。请注意，我不能使用普通的嵌套饼图，因为这将只允许每个段有一个相同的百分比。 您可以通过使用chart.js来实现这一点。当然不错：）也许也可以有嵌套的极坐标图，这样我就可以利用这两个图表了？或

我正在尝试用chartjs创建一个堆叠条形图。我有时间离散的时间序列，这意味着一些序列可以有一段时间的价值，但其他的没有。出于这个原因，我选择直接将x值包含在数据集中，而不是作为标签数组，但图表无法正确呈现 这是我的密码： var config = { type:'bar', data:{ datasets:datasets }, options: { responsive: true

我的折线图是这样设置的： 如何从背景中删除绿色并使其透明在数据集选项中将填充属性设置为false datasets: [ { label: "", fill: false, ..... ....... data: [65, 59, 80, 0, 56, 55, 40], } ] 你可以参考这把小提琴： 另请参阅chartJs文档

我有一张x轴为时间线的图表。以下是图表选项的相关摘录： 一周的例子： 现在我想调整/格式化一个特定的日期标签，比如 将今天的日期替换为今天的标签 将字体大小增加为粗体 你知道我怎样才能做到这一点吗？你可以应用你今天想要返回文本的任何自定义格式： 在目前使用alpha的3.0中，您可以使用可编写脚本的勾选选项来勾选粗体： fontStyle: function(context) { return context.index === 0 ? 'bold' : undefined; }

我使用的是Chartjs.Blazor，但我没有做到这里所描述的那样： 我有一个颜色列表（rgba，或颜色名称，我可以选择），格式为list colors=[“rgba（255,0,0,1）”，“rgba（0255,0,1）”，“rgba（0,0255,1）”，“rgba（255,0,0,1）”，“rgba（0255,0,1）” 我尝试使用LineDataset.PointBackgroundColor属性指定颜色： var _linebarDataSet = new ChartJs.Blazo

我正在尝试使用带有日期时间x轴的Chart.js，我需要通过减去5小时来调整我的所有值。以下是我的一些代码： var timeFormat = 'MM/DD HH:mm'; time: { format: timeFormat, tooltipFormat: 'll', parser: function(utcMoment) { return moment(utcMoment).utcOffset(5, true); } }, 如果没有parser函数，我的值是正常的

我有这个密码 <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script> <script type="text/javascript" src="js/chart-js/Chart.js"></script> <script type="text/javas

下面是Chart.js示例。但当我尝试渲染thaat示例时，我得到以下错误： 未捕获的TypeError:无法读取未定义的属性“draw” 这是我下面的例子。我已经做了相应的一切，我不知道为什么会导致这个问题。 下面是我的示例实现。 我的模块 angular.module('main') .controller('AboutController', ['$scope', function ($scope) { $scope.data = [ {

我正在尝试根据选择框更改热交换图表类型。如果数据需要更新，则会发生更改 例如，在页面加载时，我创建了如下图表： var config = { type: 'line', data: { labels: this.labels, datasets: [{ label: 'Some Label', data: this.values }] }, options: {

我想使用“选项”字段更改折线图的网格颜色，但我不知道从何处开始。 我第一次尝试用渐变来改变画布背景的颜色，但是效果不好 canvas{ background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%); } 然而，我没有得到我想要的，因为正如您在上图中看到的，不仅网格是彩色的，而且x值、y标签和图表图例也是彩色的 我的chart.js选项是 options = { scales: {

我正在为angular 2应用程序使用chart js/ng2图表 我可以显示条形图，但目前，所有的条形图都是相同的颜色。我想要一个不同的颜色，取决于数值 可以这样做吗？创建图表后，可以使用以下函数在数据集中循环并根据数据值更改颜色 在本例中，如果该值高于50，则颜色将变为红色 var colorChangeValue = 50; //set this to whatever is the deciding color change value var dataset = myChart.dat

在Chartjs中，我有两个图： 有什么方法可以让绿色的绘图通过红色的绘图显示在红色的绘图完全模糊前者的地方吗？对于第一个数据集（红色的），需要将

我正在像这样构建我的数据项： data.push({ x: moment(new Date(e.StartDate)).week(), y: e.title, label:`${e.title} ${e.type} ${e.percentage}%` }); 如何编写自定义工具提示回调以显示标签字符串？Chart.js文档显示自定义工具提示的完整说明： 还有一些例子： 我尝试了所有这些链接，它们只允许工具提示中的x&y轴数据，json中还有其他内容，需要显示为工具提示，但无法做到这一点。

我有一个非常简单的Chart.js条形图，其中我没有标记x轴。它看起来像这样： 我希望我的酒吧沿x轴居中，而不是左对齐，如上图所示。有什么想法吗？以下是我的数据： 数据集：[{ 标签：“蓝莓”， 数据：[this.get（'fruit'）.bluebs[0]]， 边框颜色：“蓝色”， 填充：假， 线张力：0， borderDash:[10,5] }, { 标签：“苹果”， 数据：[this.get（'fruit'）.apples[1]]， 边框颜色：“红色”， 填充：假， 线张力：0.1 }

因此，我需要创建一个CUSUM控制图，并希望使用ChartJS（）来实现这一点（这里的示例：）。基本上，此图表有一个标准的折线图，但有一个上限目标（控制极限）和一个下限目标，以显示线何时移动到所需范围之外 ChartJS是否可以实现这一点？如果可以，如何实现？我已经看了这些例子，但我不知道怎么做。这个答案可能会有帮助：太好了，谢谢。如果这是完整的答案，我将删除我的问题！

我想创建一个x轴对数的图形。我举了一个例子，将类型改为对数。但我得到的是y轴本身的所有y值（见附件）。但当我将y轴设为对数时，它的工作原理与预期一致。我正在使用chartjs版本2.9.3。当我使用2.8.0时，没有输出 这是我的代码： 对数折线图 帆布{ -moz用户选择：无； -webkit用户选择：无； -ms用户选择：无； } 随机化数据 var randomScalingFactor=函数（）{ 返回Math.ceil（Math.random（）*10.0）*Math.pow（10，

想知道是否有可能为使用chart.js创建的所有折线图配置1 比如： var chartOptions = new Chart.options = options: { responsive:true, maintainAspectRatio: false, legend: { labels:{ fontColor : '#01c38c', },

有没有办法使用Chart.JS 2.0创建垂直线（事件线、阶段变化） 我在网上看到了一些例子（），但是，当使用Moment.js创建横轴时，不可能给LineAtIndex一个Moment.js日期来在该日期创建一条直线 var originalLineDraw = Chart.controllers.line.prototype.draw; Chart.helpers.extend(Chart.controllers.line.prototype, { draw: function(

我有一个条形图，x轴上有日期。我想让周末变得大胆，或者给它一个不同的颜色 window.myBar = new Chart(ctx, { type: 'bar', data: barChartData, options: { title: { display: false, }, toolt

我有一个条形图，它每秒自动切换xAxes标签。我需要显示所有标签，但是设置AutoSkip:False无效。 下面是我的代码，我已经从中删除了一些额外的数据集 var myChart2 = new Chart(document.getElementById("ch2"), { type: 'bar', data: { datasets: [ { labe

我有以下图表设置： const数据=[{ 名称：“系列1”， 系列：[{ 日期：“2016-01-31T00:00:00.000Z”， 数值：8 }, { 日期：“2016-02-28:00:00.000Z”， 数值：10 }, { 日期：“2016-03-30T00:00:00.000Z”， 价值：12 }, { 日期：“2016-04-31T00:00:00.000Z”， 价值：15 }, { 日期：“2016-05-31T00:00:00.000Z”， 价值：14 }, { 日期：“20

我想在图表中的特定点上得到10的线宽 我可以得到10的线宽，但在所有代码为的行上： gridLines: { display: true, lineWidth: 10 }, 当前图表： gridLines: { display: true, lineWidth: 10 }, 是否可以在不同的网格线上添加特定的宽度 我想要什么： gridLines: { display: true, lineWidth: 10 }, Codepen: 您必

我想在react中使用chartjs制作水平条形图，如下所示： 但我最终还是这样做了 有人能帮我吗？我是react和chartjs的新手 以下是这篇文章的续篇： 以下是我的代码： 该数据如下： 以下是图表： 从'react-chartjs-2'导入{HorizontalBar} 从…blabla导入{dataPasienKeluarMasuk} 您应该将两个轴定义为： 为了只看到x轴记号上显示的正值，需要在x轴上定义一个函数 ticks: { callback: value =>

我使用-显然是为了创建图表 我想在我的应用程序中有一个水平条形图，但它似乎没有，所以我求助于一个叫做 然而ChartNew.js完全没有响应性，最吸引我的是拥有响应性图表的能力 我知道允许或“黑客”现有图表对象 是否可以将“常规条形图”转换为 成为水平条形图 我知道这可能对你没有帮助，但可能会帮助其他人，谷歌图表真的很好，看看吧Chart.js默认情况下没有水平条形图 然而，它是以一种非常模块化的方式构建的。这就允许开发第三方插件，而不会弄乱核心代码 由于我在做一个项目时需要水平条形图，我冒昧地

我正在使用ChartJS2.4，我想在数据集中预先定义很多设置。但使用空数据数组和未定义的标签。现在我想阻止ChartJS呈现图例，该图例随后显示为“null”或“undefined”。稍后，我将设置一个适当的标签，并开始将数据推送到数据集，最后在图表上调用update（），这很好 以下是此代码的基本配置： var data = { labels: ["January", "February", "March", "April", "May", "June", "July"],