我正在尝试使用chart.js创建多行时间序列图。问题是每条线的数据点可能没有相同的间隔，例如，一条线的点间隔为5秒。另一条线可以每隔10秒有点 有人能告诉我怎么做吗 通过查看，可以更正确地理解上述用例。Chart.Scatter（）是Chart.js库的一个附加组件-它列在Chart.js文档中- 图表。散点在图表选项中添加日期刻度 //日期刻度 //字符串-刻度类型：“数字”或“日期” 鳞片类型： 您可以在图表上看到它的作用。散点主页。Chartjs（v2.0版以后）添加了时间序列图，其示例

我创建了一个新的图表类型： Chart.types.Line.extend({ name: "LineWithRectangle", draw: function () { Chart.types.Line.prototype.draw.apply(this, arguments); var startPoint = this.datasets[0].points[this.options.startIndex] var endP

我在角度图中使用气泡图（基于charts.js） 用户必须悬停在气泡上才能知道它们的标签 如何在气泡图中显示标签或永久打开工具提示 Premraj您需要在Chartjs的选项中指定它，特别是回调部分。我举了一个例子来说明它是什么样子的 您需要在Chartjs的选项中指定它，特别是回调部分。我举了一个例子来说明它是什么样子的 谢谢@Sai。我继续讨论这个问题。我将确认解决方案是否有效并接受答案。谢谢你的时间谢谢@Sai。我继续讨论这个问题。我将确认解决方案是否有效并接受答案。谢谢你的时间

我正在尝试使用Chart.js创建一个显示多个水平条形图的页面 正如您在下图中所看到的，这看起来很奇怪，因为图形的高度都相同（我只设置了宽度并保持AspectRatio=false），因此条的大小都不同 有没有办法让所有的酒吧都一样大 我尝试了barThickness，但这只是将值分布在可用空间中的条上 我想要的是，所有的条都是相同的大小，有更多条的图形应该垂直增长

我有一个使用chart.js的堆叠条形图和未堆叠的折线图组合图。我需要堆叠的条和未堆叠的线显示在同一轴上。看起来我做不到这一点，所以我把它们放在不同的轴上，这样一个可以堆叠，另一个不能（例如，在不同零件的生产上重叠产能线）。但是，如果它们必须位于不同的轴上，那么我需要它们具有相同的比例。我无法找到一种方法来强制轴自动具有相同的比例，因此我被迫尝试计算我自己的比例，并将它们分别设置为相同的比例。这并不理想，我更希望我可以使用一个设置来强制他们使用相同的比例。这可能吗 这是一篇与我基本相同的帖子：唯

是否可以定义具有多级/类别轴的条形图 例如，我想在Excel图表中显示区域/省份类别： 我找到了使用多个XAX的示例 xAxes:[ { id:'xAxis1', type:"category", ticks:{ callback:function(label){ var month = label.split(";")[0]; var year = label.split(";")[1];

图表js仅在具有24个数据点的迷你样式图表上显示2个数据点。这是图表大小的问题吗？我有另一张基于相同数据的图表，效果很好。。。这是工具提示问题还是尺寸问题？我似乎无法让它显示所有数据。我尝试了很多配置，但问题仍然存在。谢谢 我发现了问题。我没有正确地传递标签数据。本应通过如下内容： data: { labels: labels, datasets: [{ 等等。如果没有数据本身，很难判断问题出在哪里。您也可以共享“cleandata”吗？@AnikoLitv

步长不考虑最小值 包括小提琴- var选项={ 键入：“行”， 数据：{ 标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]， 数据集：[{ 标签：“#投票数”， 数据：[12,19,23,15,32,33]， 边框宽度：1 }, { 标签：“#个点”， 数据：[17,11,25,18,13,37]， 边框宽度：1 } ] }, 选项：{ 比例：{ 雅克斯：[{ 滴答声：{ 民:5,， 最高：40， 步长：8 } }] } } } var ctx=document.getEl

我正在使用ChartJs和datalabels插件，我想将鼠标光标添加到图表中的指针，这可能吗 我是按照网站的例子，有人能帮我吗 data: { datasets: [{ datalabels: { listeners: { click: function(context) { console.log('label ' + context.dataIndex + ' has been clicked!'); }

我需要建立两个不同的标签集线图 下面是一个例子 })) 我该怎么做？ //使用以下可能有用的代码 var ctx=$（“我的图表”）； var myChart=新图表（ctx{ 键入：“行”， 数据：{ 标签：[1500160017001750180018501900195019992050]， 数据集：[{ 数据：[861141061061071111332217832478]， 标签：“非洲”， 边框颜色：“3e95cd”， 填充：假 }, { 数据：[282350411502635809

我试图让我的简单图表在两侧都有相同的y轴显示，如果不添加另一个图表，我似乎无法正确显示 有没有可能让它只使用一个图形 data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'My First dataset', data: [0, 10, 5, 2, 10, 15, 5], point

我有一个要求，在悬停时，我需要显示一条水平线，就像下面的小提琴一样。 但一旦画出悬停水平线，工具提示就会消失。 有谁能帮我把工具尖和水平线连在一起吗 请注意，在下面的小提琴，我们有悬停的问题，这需要时间，但在我的实际项目悬停工作良好，我只是有一个问题，悬停后工具提示不工作一段时间后。 var option = { legend: false, title: { display: true, }, onHover: function(evt) { var item

我有一些带有时间戳和整数值的数据。现在我创建了一个散点图，因为我的时间戳不在同一频率，但值是在随机时间获取的。时间戳是x轴，值是y轴。现在我想把时间戳转换成可读的时间格式。所以我包括了一些时刻。但我就是不能让它显示我格式化的时间字符串。它只是简单地显示一些默认格式，即使我更改了代码。 这是怎么回事？标签是 这是我的密码： var x=new Chartdocument.getElementByIdhum1{ 键入：“散布”， 数据：{ 数据集：[{ 标签：测试， pointStyle:'lin

我正在尝试更改雷达图上点标签的字体大小。看起来这是你应该做的，但对我来说不起作用。非常感谢您的帮助。在V3中，他们引入了一个font对象，而不是单独的属性，因此您将不得不这样说： var myChart = new Chart(ctx, { type: 'radar', data: chartData, options: { scale: { min:

我想跳过chartjs折线图上的零值的一些点 我怎么做呢 预期结果 样本数据 可以使用onAnimationComplete功能禁用点和工具提示显示 var ctx = document.getElementById("myChart").getContext("2d"); var myLineChart = new Chart(ctx).Line(data, { animation: false, onAnimationComplete: function () {

当使用chart.js v2将鼠标悬停在折线图上时，是否有办法获得垂直洗涤器线？类似于使用此人力车示例显示垂直线的方式： 我可以使用工具提示沿直线的实际点，但它希望当用户将鼠标悬停在图表上并从左向右拖动时，能够显示一条垂直线您可以扩展chart.js来执行此操作。初始化图表后，只需覆盖showTooltip方法 预览 脚本 Chart.types.Line.extend({ name: "LineAlt", initialize: function () {

我想为线条数据定制一个图例，以便图例图形是一条线条（样式类似于实际数据线），而不是一个方框 据我所知，图形可以是点或框，框的高度固定在字体大小上。“generateLabels”选项似乎不允许围绕这些违禁品展开 版本2.2.1 感谢您的帮助。注意：此解决方案仅在您有本地版本的Chart.js时有效，因为它需要在库的源代码中编辑函数，如果您从CDN导入函数，则无法完成此操作。 要实现所需功能，需要编辑drawLegendBox函数（） 首先，如果要创建点样式图例，请添加useLineStyle，并

我正在使用chart.js库制作图表。我想在点击饼图/甜甜圈图的任何部分时，像旋转木马一样显示图像库。我找不到合适的解决办法。如果我正确理解您试图在用户单击图表段后触发事件，请建议一些解决方案。chart.js有这个原型方法getElementAtEvent（）；看 这似乎是一个很好的起点——您可以创建一些函数来打开图像库并在那里调用它 gallery/slider的实现是一个独立的问题，但是如果您使用一些流行的ui库，其中一些已经有了解决方案。例如，Bootstrap有很多插件，JQuery也

我正在使用Angular 5和Chart.js进行一个项目。 我需要在我的图表中创建自定义图例，所以我关注这个git问题来帮我一点忙： 这是非常有用的，它只在纯javascript中按预期工作，但尝试将示例回复到Angular 5应用程序中是行不通的，它会抛出这个问题。updateDataset（）不是一个函数。 下面是我目前在选项中所做工作的一个片段： legendCallback：（图表）=>{ 常量legendHtml=[]； legendHtml.push（“”）； legendHtml

我在Chart.js上有一个折线图，正在尝试编辑x轴和y轴上的间隔 我的y轴间隔正常工作，但我的x轴间隔不正常 我尝试了以下代码 let myChart = new Chart(inputChart, { type: 'line', data: { labels: [1,2,....,360] // list of values from python script data: [360 random numbers here]

我可以在下面创建chart.js饼图： this.httpClient.get(this.url).subscribe((res: Stock[]) => { res.forEach(holding => { this.company.push(holding.company); this.price.push(holding.price); }); this.chart = new Chart('canvas',

我有两个不同数据的图表，相互叠加。如何使这两个图表共享1个y轴的相同比例 我将y轴配置如下： yAxes: [{ display: true, stacked: true, type: "linear", scaleLabel: { display: true, labelString: "Amount in USD" }, ticks: { beginAtZero: true, max: 15000

我无法获得支持ChartJs的Jquery版本。我更新了Jquery，但突然间图表没有显示出来。我当前的ChartJs版本是2.6.0 在开发人员工具>控制台中，我遇到以下错误： 未捕获的DomeException:无法在上执行“arc” “CanvasRenderingContext2D”：提供的半径（-75）为负值 根据官方文件，没有提到 您可以使用- $==jQuery 或 window.onload = function() { if (window.jQuery) {

我创建了以下问题，得到了友好的回答（有人建议我创建一个新问题！）。虽然答案很有效，但我在同一页上有2个图表，由于某种原因抛出了一个无法读取未定义的错误的属性“数据” 我不想包括我的2张图表的完整性，但移动条形图的afterUpdate代码如下所示： function(chart) { var datasets = chart.config.data.datasets; console.log(datasets); for (let iDs = 1; iDs <

我正在使用Chart.js，我想知道是否有一种方法，当你点击饼图的一部分时，它会过滤条形图。使用dc.js： 它完全具备所要求的功能。因为这是一个Chart.js问题：-），这就是如何实现Chart.js的方法（而且也不太复杂） 设置饼图 // pie var data = [ { value: 300, color: "#F7464A", highlight: "#FF5A5E", label: "Red",

我正在使用Chart.JS绘制数据集 但是我得到了一个平滑的效果 这是我得到的曲线： 这是我的密码： 功能图（数据、标签）{ 变量lineChartData={ “数据集”：[{ “数据”：数据， “pointStrokeColor”：“fff”， “填充颜色”：“rgba（2200,0.5）”， “点颜色”：“rgba（2201）”， “strokeColor”：“rgba（2201） }], “标签”：标签 }; var myLine=新图表（document.getElementById

我有多个图表显示不同的数据。但是，它们都是相同的对象类型e.ge[acc1、acc2、acc3]。因此，我想知道是否有可能在某个页面的某个位置设置一个父图例，单击它将显示/隐藏所有图表中的所有对应数据集？我认为您可以隐藏图表中除一个以外的所有图例，并实现自定义onClick函数来处理对该图例的单击并隐藏所有数据集每个图表对应的数据集 当前的onClick实现如下所示： onClick: function(e, legendItem) { var index = legen

我有一张正确输出信息的图表，但它太高了。我看了文档，找不到使Y轴“更小”的方法。我的意思是改变它的计算方式——在这个屏幕截图中，它增加了10秒。有没有可能增加20秒？我有三个Y轴点？这将降低高度 作为参考，谷歌分析输出数据的方式是一种很好的方式。它们的图表美观且纤细，为周围的其他内容留出了空间。您可以使用y轴刻度的步长属性。通过将此属性设置为20的值（间隔），将减少y轴的滴答声计数 scales: { yAxes: [{ ticks: { stepSize:

Chart.js版本：2.9.3 我有一个经验，我正试图创造和基于我所看到的点击处理，这可能是不可能的（容易？） 我有一个条形图。当用户单击一个条时，他们正在“钻取”该数据。从交互的角度来看，这是绝对可行的，但是有一个问题 问题来源 （这将导致向下钻取，更改基础数据集。handleEvent然后尝试进行。这将导致在操作过程中出错 复制 这里是。您将在控制台中看到异常：无法读取未定义的属性“\u meta” 我正在考虑的一些事情： 在Chart.js单击处理完全完成后，是否有一种很好的方法进行向

我正在努力使用charts.js和双轴水平条形图获得正确的xAxis设置。JsFiddle链接如下。问题是我试图在同一张图表中显示两个不同的刻度。一个是高数字（价格），另一个是低数字（数量） 我在选项属性中使用第二个x轴，但标签显示为月份，而不是数量！如何显示数量 <canvas id="myChart" width="400" height="200"></canvas> <script> var canvas = document.getElementB

我想用chartJS粗体制作一部分标签。我一直在查阅文件，但找不到任何方法。如果可能的话，我希望有人能帮助我下面是我希望它如何工作的图片。（它是用photoshop制作的） 因此，我想将“bar total”、“bar 1”、“bar 2”、“bar 3”和“bar 4”加粗，以便更清楚地显示时间的差异 “我的代码”中的标签设置如下： labels: [["bar total", "150 hour"], ["bar 1", "70 hour"], ["bar 2", "30 hour"],

我正在使用chartjs在我的应用程序上绘制折线图。我在x轴上有日期，但作为分类尺度。表示标签为字符串，但为日期。在y轴上，我有数值。我正在更改某些功能的图表，更改后我想突出显示图表的某些区域。有没有办法在折线图上突出显示一个区域？我找过了，但什么也没找到 我想务实地这样做，就像有一些具体的日期我想强调，所以我想有这种类型的效果 任何形式的帮助都将不胜感激。我对图表和javascript之类的东西非常熟悉 p.S这是专门为折线图设计的，而不是为甜甜圈设计的。我用这个库来做类似的事情。检查一下。

我正在使用Chart.js库创建图表，一切正常，但我的客户希望图例中有正方形，而不是矩形（我知道这是一件小事，但客户是国王）。当然，我可以用一些HTML和CSS制作我自己的图例，但我更愿意继续使用我的图表库 我希望有人能解决这个问题。您可以生成如下自定义图例（HTML字符串）： var chart = new Chart(ctx, { type: 'line', data: data, options: { legendCallback: function(chart) {

我使用chartjs创建了图形。它工作正常，唯一的问题是它在每个点上显示数据标签（数字）。我想把它们藏起来，但找不到方法。有人能帮我解决这个问题吗？我尝试将pointRadius设置为0，但它没有达到我想要的效果 如果我不能隐藏它们，有没有办法改变它们的颜色 我也有同样的问题，因此我看到了这篇文章。我猜你已经安装了datalabels插件（我安装了）。将此项添加到图表选项： plugins: { datalabels: { display: false, },

我有一个带有两个数据集的折线图。最初，Y轴为0-100。第一条线大致是一条围绕值70的直线，第二条线都在值30以下。如果我通过强制Y轴最小值为65，最大值为75（即我想检查垂直展开的第一行）垂直缩放图表，那么当我将鼠标悬停在数据点上时，工具提示将丢失。事实上，我认为这是不可能的 工具提示似乎自动垂直放置在最低和最高数据点之间，即使其中一个数据点位于图表下方 我的问题：这是一个bug还是有什么方法可以让chart.js在确定工具提示垂直位置时忽略图表外的数据点 如果工具提示始终处于固定的垂直位置，

我发现可以使用数组在chartjs中创建多行标签。 我想要一个多行scaleLabel。当前，数组在一行上显示结果。 非常感谢您的帮助 scales: { xAxes: [{ stacked: true, scaleLabel: { display: true, labelString: [[firstCategory + ': ' + avg1], [ secondCategory + ': ' + av

在chartjs中，有没有一种方法可以在零线上设置一个条形跨距？例如,， 假设我有一个酒吧 data:[x:1, y:100] 我如何告诉它y轴的跨度从-100到100（而不是从0到100） 我在这里有一个游乐场，在那里，我可以在每一个小节上做负数或正数，但不能在一个小节上同时做负数或正数 这可以从开始执行，现在支持。现在可以使用语法[min，max]指定各个条 浮栅 帆布{ -moz用户选择：无； -webkit用户选择：无； -ms用户选择：无； } var图表数据={ 标签：[1,2

通过反复试验，我推断var myChart=new Chart（ctx，myChartConfig）中的myChartConfig必须包含有效的类型键 即使我尝试指定一个全局默认值：Chart.defaults.global.type='line'，除非我包括 myChartConfig = { type: 'bar' } 我收到一个错误“undefined”不是图表类型 这似乎是myChartConfig对象中唯一需要的键。我查看了文档，但找不到构造函数的文档位置，这没有指定图表配置所需

是否有可能在加载日期和图表之前激活加载指示器（覆盖）？文档中没有这方面的信息，也没有类似于oninit或oncomplete的事件可能性。 谷歌也没有给出任何有用的解决方案。Thx允许您定义动画的外观以及所需的时间。尤其是onProgress和onComplete在您的案例中可能会很有用 请看一下下面的代码示例：thx，除非我没有错，这是用于图表动画的。我需要的是在图表动画开始之前加载指示器。

我正在使用以下数据集 this.chart = new Chart( this.canvasContext, { type: 'bar', data: { labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], datasets: [ { label: "Population (millio

在我的图表数据中，我几乎没有负值，正因为如此，我的图表X轴被重新调校以绘制负值。我想避免缩放并绘制x轴图表，我想在y轴的正外部绘制否定值，以指示该值正在小于0 如果我设置min:0，则图表不会对负值进行重新缩放，但不会渲染负值 那么，如何在不重新缩放轴的情况下显示负值呢

当使用以下代码生成图表时，我无法将比例设置为从零开始，甚至无法设置该选项 下面是代码（） 这是虫子吗？我应该怎么做才能将刻度设置为真正从0开始 另外，我如何才能禁用呈现的“#个服务器”标签？我也遇到了同样的问题。您必须在yAxes定义中定义“记号”： scales: { yAxes: [{ ticks: { beginAtZero: true } }] } 更新小提琴： sc

此Meteor客户端代码试图让chart.js正常工作，但它没有绘制任何东西。i、 e.空白页。 包装：图表：图表 你知道为什么以及如何在页面上显示情节吗？谢谢 Template.jack.onRendered（函数（）{ console.log（'jack rendered'）； var ctx=document.getElementById（“myChart”）.getContext（“2d”）； var myChart=新图表（ctx{ 类型：'bar'， 数据：{ 标签：[“红色”、“蓝

我是chartjs的新手，在这方面找不到任何例子。。。 有没有办法用一个长y轴而不是3个刻度/y轴垂直堆叠这些图表（相同的x轴） 由此： 对这样的事情：（只是一个例子） 谢谢所以我做了一些研究，很多人都有这个问题 我给你的解决方案在与最终用户交互时会遇到一些问题，但如果只是为了显示，这可能就是你想要的 Right here is the example where you can ofcourse add your own format and specifications: 所以我更

我用它画多个折线图。当用户点击其中一个图表时，我需要知道它是哪个图表。为了捕捉用户的点击，我在图表的选项中添加了事件：['click']，以及onClick:clicked在用户点击图表时调用函数clicked。现在我有这个： let chLine=document.getElementById（“chLine”）； 让chartData={ 标签：['l1'，'l2'，'l3'，'l4'，'l5'，'l6'，'l7'，'l8'，'l9']， 数据集：[ { 标签：“c1”， 数据：[0.3,

尝试了解如何为每个栏的工具提示存储自定义信息文本。（见下图） 百分比来自标价栏和销售价格栏的计算，文本将根据正百分比和负百分比进行更改 这是代码。 工具提示文本当前已硬编码 Chart.defaults.global.defaultFontSize=10； var listPriceData={ 标签：“平均标价”， 数据：[100200300400500600]， 背景颜色：“#ff937f”， 边框宽度：0， yAxisID：“y轴-0” }; var salePriceData={ 标

我试图创建一个混合图表，用水平条形图和一个点来表示当前用户的答案。我已经创建了水平条形图（请参见附件屏幕截图），我想显示一个绿点来表示当前用户的回答。我能够使用混合垂直条形图和折线图来显示绿点（除了需要显示绿点的点外，将线上的所有点保持为空），但我无法使用水平字符来实现这一点 下次当你问问题时，请发布你已有的代码，以便人们能更容易地帮助你，为你做一个简单的例子，你可以在下面看到 var ctx=document.getElementById（“myChart”）； var myChart=新图

我尝试将图例选项设置为display:false，但无论我做什么，图例都不会消失 我已经三次检查了我的语法，搜索了这个网站，但我不明白为什么这个标签不会消失 见代码笔： var-config\u过期={ 类型：'bar'， 数据：{ 标签：[ “逾期90天”， “逾期180天”， “逾期365天” ], 数据集：[{ 标签：“如何删除此内容？”， 数据：[1005001000]， 背景颜色：[ "rgba(255,205,86,0.2)",， "rgba(255,159,64,0.2)",，

阅读了大量关于如何使用tooltip回调在ChartJS v2.x中格式化工具提示的内容。到目前为止，我已经取得了成功，但我发现我无法为我拥有的两个数据集定义两种不同的格式 更详细地说，我在条形图的顶部有一个折线图： 我的酒吧数据是数字（以百万计，需要四舍五入和截断） 示例：22345343需要在工具提示中显示为22M 我的行数据是一种货币 示例：146.36534需要在tooptip中显示为$146.37 这是我到目前为止的简短WIP代码。这会将工具提示格式化为四舍五入，并包含$符

所以我基本上是在拉扯我的头发，因为我不能让它连续工作几个小时 我试着做一个（我假设是简单的）线图，在x轴上以小时为单位，在y轴上以视图数为单位。到目前为止，我一直试图将x轴范围设置为-24小时 我的代码如下。我做错了什么 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https: