Chart.js基于时间的条形图
Chart.js是一个开源的JavaScript图表库，用于在网页上创建各种类型的图表。它支持多种图表类型，包括条形图、折线图、饼图等。其中，基于时间的条形图是Chart.js中的一种特殊类型的条形图，用于展示随时间变化的数据。
基于时间的条形图可以用于多种场景，例如展示某个时间段内的销售额、用户活跃度、股票价格等随时间变化的数据。它可以帮助用户直观地了解数据的趋势和变化情况。
Chart.js提供了丰富的配置选项和交互功能，使得基于时间的条形图可以根据需求进行定制。用户可以设置图表的样式、颜色、标签、刻度等，以及添加动画效果和交互功能，提升用户体验。
对于基于时间的条形图，腾讯云提供了一款适用的产品：云原生时序数据库TSDB。TSDB是一种高性能、高可靠性的时序数据存储和分析服务，适用于存储和查询大规模的时间序列数据。它可以与Chart.js结合使用，实现基于时间的条形图的数据存储和展示。
腾讯云TSDB产品介绍链接地址：https://cloud.tencent.com/product/tsdb
总结：Chart.js基于时间的条形图是一种用于展示随时间变化的数据的图表类型。它可以通过腾讯云的TSDB产品进行数据存储和展示。
相关·内容
1回答
我想知道Chart.js是否可以做到这一点。我还没能弄明白。 基本上，我想要一个水平条形图，其中时间在X轴上，条形图的数据是开始日期/时间和结束日期/时间，这样条形图就“浮动”，而不是锚定在图表的左侧。条形图将从开始时间开始，在结束时间结束，如x轴上所示。 另外，我需要y轴标签在水平条的内部。 Chart.js是否支持此用例？有没有人有示例代码？谢谢!
浏览 37提问于2021-04-08得票数 0
我正在使用chart.js尝试创建与当前日期相关的事件时间线。
水平条形图是接近的，但只想显示条形图的尖端(如点)，这几乎是一个水平线图。
我已经展示了我的水平条形图，以及它看起来像水平线图的一个模型。
这与chart.js是可能的吗？
浏览 1提问于2016-07-19得票数 2
回答已采纳
我想创建一个条形图，条形图中的条形在网格线之间居中。在这个合并请求之前，这种行为是可能的：
在原始版本中，这可以通过offsetGridLines: false (类别比例)来实现。
我使用chart.js和NG2创建了一个带有angular应用程序的stackblitz -charts：
使用chart.js 2.6.0的工作代码：
public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true,
scales: {
xAxes: [{
浏览 3提问于2020-05-22得票数 1
我可以用chart.js绘制普通条形图。不过，我想画一个条形图如下。
我查阅了chart.js的文档，但没有结果，也在网上进行了广泛的搜索，但没有发现任何提示。几乎所有的问题都会导致条形图中有多个颜色条。
浏览 4提问于2017-02-22得票数 2
回答已采纳
我正在使用python和chart.js启动新项目，我正在使用chart.js的条形图，我希望修复每个条形图的宽度，但是它仍然是这样的，那么我如何为所有的条形图应用修复宽度呢？
每次显示最大6条时，当我们添加第7条时，就会出现水平滚动。
浏览 1提问于2016-03-29得票数 4
回答已采纳
我正在使用角图my (它使用Chart.js)在我的角度应用程序中创建图表。我想在条形图中的条形图上添加值。如果在Chart.js中扩展默认图表是唯一的方法，那么请提供参考代码吗？
浏览 4提问于2015-08-25得票数 1
回答已采纳
1回答
我正在使用cypress.io测试我的react应用程序。这个应用程序包含一些chart.js图表。我可以在设置id后识别条形图。
<Bar id="goodBadBar" options={optionsBar} data={barData}/>
现在我想验证一下这个图表是否有两个条形。我怎么“找到”有两个酒吧？
这是我目前的代码：
cy.visit("http://localhost:3000/totals");
// The chart should be visible
cy.get("#goodBadBar&
浏览 10提问于2022-10-11得票数 1
2回答
谁能给我演示一下Chart.js 2.6+用来计算条形图中Y轴的数学逻辑？我已经创建了一个分页功能，允许我在具有大量柱状图的条形图中分页。它工作得很好，除了我需要在图表的数据集发生变化时Y轴保持不变。
为此，我获取图表的数据并创建其子集，例如前20条记录，并将其作为数据对象提供给图表。但是，为了使Y轴固定，我采用完整数据集中的最大值，并将其作为图表中yAxes对象的ticks中的max值提供，如下所示。
yAxes: [{
ticks: {
max:value_i_determine_here
}
}]
这是可行的，但并不完美，因为Chart.js有时会
浏览 5提问于2017-07-20得票数 3
回答已采纳
1回答
我见过其他支持分组条形图的javascript图表库，如下图所示。在chart.js的在线编辑器中，我没有看到这是一个显式的选项。
在chart.js中可以制作这种类型的分组条形图吗？这很容易吗？在他们的在线编辑器中有没有一个模板？
浏览 1提问于2015-01-28得票数 73
回答已采纳
1回答
我正在使用Chart.js显示一些数据作为条形图。这些数据的一个例子是：
{纽约: 29033，旧金山[：33432，俄克拉荷马城:38202]，等等。
当我使用这些数据集与Chart.js一起创建条形图时，图表中的条形图将与标签一起压缩，或者压缩在一起，或者很远，这取决于创建的标签数量。
有没有一种方法可以使条子和标签对齐，使它们与之相吻合？
浏览 1提问于2014-02-12得票数 0
我想找到一种方法来做这个:一个条形图，所有的条形图都以同样的速度开始缓慢增长，所以你不知道哪个条形图的结果会更高。每一个到达高度的时候都会停下来。
我在看chart.js和莫里斯的图表，但我还没有找到在那里做的方法。如果您知道如何在chart.js或任何其他库中这样做，请告诉我！
浏览 0提问于2017-03-21得票数 3
回答已采纳
我使用chart.js绘制条形图。如何在chart.js中更改条形图填充颜色。(我使用“条形图”)
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,
浏览 0提问于2014-04-09得票数 2
回答已采纳
我试图通过Rhino调用函数来使用Chart.js从java生成条形图，但是我在使用Chart.js所需的html元素时遇到了问题。
浏览 2提问于2019-01-31得票数 0
1回答
我想绘制由少量但可变数量的彩色区域组成的条形图，相同的(三种)颜色在每个条形图中出现多次。我知道stacked bar charts in chart.js，但它对每个条形图使用相同数量的彩色区域(数据集)。用它来绘制一组长度为零的数据集，以获得每个条形图中正确数量的彩色区域，这感觉是错误的。也就是说，chart.js中的工具提示等很好，所以如果没有更自然的解决方案，也许零长度数据集是可行的。有什么想法吗？
浏览 14提问于2020-09-26得票数 0
我在试着把条形图显示在反应图上。我还下载了条形图、、chart.js、和的依赖项。
"chart.js": "^3.6.0",
"react": "^17.0.2",
"react-chartjs-2": "^4.0.0",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
但是条形图没有显示内容，我仍然会得到错误
Reactjs
import Re
浏览 1提问于2021-11-27得票数 5
作为背景:我有一个水平条形图和一个动态的条形图。我已经为每个数据集设置了最小和最大条宽。
默认情况下，chart.js对齐图表中心的条形图。相反，我想将条形图对齐到左边(或者在顶部，因为我使用的是水平条形图)。
将条形图看作HTML元素，这相当于将css：float:left应用于每个条形图。不管怎么说，在chart.js中有这样做的吗？我仍然希望斧头能延伸到容器的末端，只是在它们之间只有几根有大量空间的条子(我也不想要真正的胖条)。
谢谢你的帮助！
注意:这是的副本
编辑：例如，请参阅 (图中有一个条形图，我希望它对齐到左边，靠近y轴)。
浏览 5提问于2020-05-28得票数 1
回答已采纳
1回答
我在一个项目中使用chart.js，因为它拥有麻省理工学院的许可证，而不是高海图框架。有一件事可以很容易地在高图表上完成，而我似乎不能用Charts.js来做，那就是在我的条形图上有标签，
在高图集中，这个条形图的每个堆栈上的数字都是以这种方式配置的：
plotOptions: {
series: {
dataLabels: {
enabled: true
}
}
我已经广泛地阅读了，没有找到在论坛中实现同样的可视化或示例的方法。有用Chart.js条形图在条形图上显示数字
浏览 1提问于2021-03-31得票数 1
回答已采纳
5回答
在Chart.js中，有任何方法可以在"horizontalBar"图表中在水平条形图中写入标签吗？就像这样：
在Chart.js中有类似的东西吗？
谢谢!
浏览 0提问于2016-07-28得票数 20
回答已采纳
我正在用NG2图表库创建条形图。在ng serve时，我得到了以下错误
node_modules/chartjs-plugin-datalabels/types/index.d.ts(5,16)：错误TS2665中的错误:增强中无效的模块名。模块'chart.js‘解析为’/node_node/chart.js/src/chart.js‘的非类型化模块，这是不能扩展的。
我想要一些条形图上的数据标记。
因此，我在组件中添加了“chartjs-plugin-datalabels”。
当我在代码中添加以下行时，会发生此错误。
import * as pluginDataLabels
浏览 1提问于2019-03-29得票数 2
回答已采纳
我在我的项目中使用chart.js，在X轴上有一个每日刻度的时间刻度，在Y轴上有两个线性刻度。在一个线性尺度上，我呈现了一个表示时间趋势的常用折线图，而在另一个线性尺度上，我呈现了多个堆叠的条形图，表示每天的平均统计数据。之前的chart.js v3版本要求使用通用的图表类型bar来实现这一点，在我的例子中，甚至在时间尺度上也是如此。我必须使用的唯一解决方法是将条形图数据设置为12:00 as，使其以当天为中心，同时手动设置barThickness，因为它将默认设置为0 (?)在一个时间尺度上，否则。 ? 现在，我最近更新到v3.2.0，并根据迁移文档调整了我的选项和数据集。渲染图表
浏览 33提问于2021-04-28得票数 0
回答已采纳
我正在尝试使用Chart.js v2.2将生成的时间刻度标签与条形图条形图的中心对齐。我已经尝试了offsetGridLines选项，但在使用X轴缩放类型时间时似乎没有效果。
这里有一个例子，也许我遗漏了一些东西：
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var barChartData = {
labels: [&#
浏览 11提问于2016-07-28得票数 5
1回答
我在我的项目中使用chart.js。正如您在下面的代码中所看到的，chart.js对同一数据使用不同的y轴和条形图的最小值和最大值。在给定的代码中，1100-1700是线条图的值范围，而0-2000是条形图的值范围。
我喜欢为线条图和条形图做相同的最小值和最大值。一种选择是找到我自己的最小、最大和步长值，并在比例下使用属性min、max和ticks.stepSize。但是，为给定的数据寻找最小、最大和步长是一项严肃的任务。
对于我的要求，默认的最小值、最大值和stepSize，由chart.js对线条图使用是很好的，我也想对条形图使用相同的值。
我可以先渲染线条图，从这个图中获取这些值(比如s
浏览 6提问于2022-11-16得票数 0
回答已采纳
我在self.autorun函数中有一个chart.js条形图，它响应下拉选择器。当我从下拉列表中选择一个新实体，然后将鼠标悬停在条形图中的值上时，y轴跳跃如下：
下拉代码：
Template.Dropdown.events({
"change #category-select": function (event) {
var category = event.currentTarget.value;
Session.set("chosenDairy", category)
}
});
条形码：
浏览 1提问于2016-01-31得票数 3
我在Angular JS中使用了一个指令来使用chart.js。Git链接：
我对使用堆叠条形图很感兴趣。如何在条形图上添加数据标签以显示堆叠条形图中的每个条形值？
浏览 17提问于2016-08-14得票数 0
没有关于从数据库获取数据的连接的chart.js文档，这就是为什么我仍然好奇如何从外部图形数据实现我的条形图。到目前为止，我使用的是codeigniter框架，我不认为CI有图表图形库。因此，在第二次思考中，我将如何在我的框架中正确地实现该图。因此，首先我加载了一个离线chart.js：
<script src="<?php echo base_url('assets/js/Chart.min.js')?>"></script>
接下来，我使用固定数据实现条形图：
var ctx = document.getElementBy
浏览 3提问于2017-08-14得票数 1
我需要为我的线条和我的组合(条形图和线形图)绘制水平限制线。有一个针对Chart.js < 2.0的解决方案，如下所示：
但此解决方案不再适用于chart.js > 2.0：
jquery.1.12.1.js:9743 Uncaught TypeError: Cannot read property 'extend' of undefined
那么我该如何在Chart.js 2.1.6中绘制限制线呢？
浏览 26提问于2016-08-07得票数 0
回答已采纳
3回答
在角JS和chart.js中，可以在悬停时显示工具提示，甚至在单击bar时调用函数(假设您使用的是来自chart.js的条形图)。
但是，当您单击条形图时，可以调用指令吗？或者我应该使用canvas.js来完成这个任务？
我所指的指令是自定义的，它弹出为包含一些值的窗口。它不必是指令，它甚至可以是在单击图表中的一个条形后调用的角分量。
浏览 3提问于2020-02-10得票数 3
回答已采纳
2回答
我有一张条形图。我在用
react-chartjs-2 ("^4.2.0"，)Chart.js ("^3.8.0"，)
我的图表显示时间段，我希望在加载组件后突出显示最近的时间段。高亮是通过设置active属性来完成的。它可以使用onClick，但是我希望在用户单击任何内容之前(在组件加载时)就突出显示其中一个条形图。
我的问题是，如何用react chartjs-2完成这样的场景？我看到有一个叫做chart.setActiveElements的东西，但是我在我可以访问的对象中找不到它。如何利用这一属性作出反应？此外，如果有不同的方法来实现这一目标，请告诉我;)
浏览 15提问于2022-10-12得票数 0
回答已采纳
我正在尝试找出是否有任何插件可以用chart.js制作水平堆叠条形图
我看到有用于堆叠条形图和水平条形图的插件，但我没有找到将两者结合在一起的插件。
有人知道如何做到这一点吗？
浏览 1提问于2015-11-18得票数 18
回答已采纳
使用chart.js，我有一个条形图，其中的数据点分布在很多年： ? 如果你仔细观察x轴附近，你会看到一些灰色的线条。以下是具有相同数据的折线图，以供参考： ? 虽然在这个示例中使用折线图可能是有意义的，但它使数据较少的图表有点笨拙： ? 用条形代替线条 ? 当涉及较大的x轴时，是否有可用于条形图以提高可读性的选项？我代表的是随着时间的推移事件的发生，另一种适应的图表也可以接受。 谢谢。
浏览 24提问于2020-08-20得票数 1
我想使用chart.js在水平条形图中绘制一个条形图，条形图周围都有一个边框。 如图所示，我成功地应用了边框，但我不知道如何在左侧创建边框；这将使它成为一个完整的正方形。 任何帮助都将不胜感激。 ?
浏览 9提问于2021-08-11得票数 1
回答已采纳
我正在尝试使用chart.js创建一个条形图，以显示按出版物购买的广告中的广告印象数。所需的图表将为每个出版物显示一个条形图，表示该网站上广告的印象数。 我认为这需要作为多个数据集发生，每个出版物一个数据集，其中每个数据集包含一个数据点。下面是我在这种方法中使用的代码： var chartData_webbanner_300x600 = {
labels: ["Publication 1", "Publication 2"],
datasets: [
{
label: "Publication 1
浏览 12提问于2019-03-01得票数 2
1回答
我正在使用Chart.js，并将其设置为生成一个漂亮的条形图。不幸的是，当您将鼠标悬停在条形图上时，默认弹出窗口仅显示条形图的值。我希望弹出窗口显示组中的每个酒吧的标签和它的值。你有没有什么例子等等？非常感谢!
浏览 9提问于2017-12-27得票数 0
我想用EChart.JS ()绘制一条水平目标线，显示线、条形图和饼图上的阈值限制。
还有其他的线程-- "Chart.js -绘制水平线“--详细说明了如何使用Chart.JS。有谁在使用EChart时有过特殊的经验吗？
提前谢谢。
浏览 3提问于2017-08-20得票数 4
回答已采纳
我希望能够将x标签链接到Chart.js条形图中。我已经彻底搜索过，并试图想出自己的解决方案:因为标签对应于它们上面的条形图，而且Chart.js有一个内置的getBarsAtEvent(evt)方法，所以如果用户没有单击图表，我尝试创建一个事件--这个新事件的pageX和pageY直接高于初始单击，因此如果用户单击了标签，新事件将模拟对条形图的单击。
但是，反复调用getBarsAtEvent(createdClickEvent)会给出一个Uncaught TypeError ("Cannot read property 'getBoundingClientRect'
浏览 6提问于2016-01-21得票数 3
回答已采纳
2回答
这是我第一次使用Chart.js，我想创建包含多个序列的条形图。根据文档，我们必须为每个数据集指定fillColor。是否可以在不设置fillColor情况下创建多个图表(如excel中的条形图)。
浏览 0提问于2014-07-08得票数 6
回答已采纳
我正在尝试使用Chart.js生成一个条形图，在x轴上显示月份名称，在y轴上显示价格值，其中我希望显示省略号或"_“，表示空值或空值，而不是空格。 请帮助我使用chart.js编写示例代码
浏览 44提问于2020-12-02得票数 0
我正在尝试使用Chart.js创建条形图。我正在尝试让图表显示条在一个以上向上，而低于1(例如0.8)的值则指向下。如果图表包含小于零的值，则将显示与图表相同的值。本质上，我试图将Y轴的基线改为1而不是0。
如下所示：
浏览 20提问于2020-05-21得票数 0
回答已采纳
我试图使用Chart.js创建一个条形图和线条图，但我希望条形图有一个不同的“标签”集。
线图的数据是在第一个和最后一点2800,1300，我希望这条线画在条形图的标签上。
这个是可能的吗？
期望的
结果
浏览 4提问于2016-05-14得票数 1
我目前正在构建一个分组条形图，其中包含两个使用chart.js的不同数据集。component.js文件中的代码如下： createChart(){
var lbls = ['Selling', 'Cost', 'Gross'];
var curYearData = [2345, 1234, 1111];
var preYearData = [3456, 2345, 1111];
var ctx = document.getElementById(‘barChart') as HTMLCanvasEle
浏览 18提问于2020-06-25得票数 0
回答已采纳
2回答
如果只有一个条形图，是否可以在Chart.js上指定条宽？
我在条形图上显示年份，但通常只有一年(2015年)，所以它很宽--我希望它更窄一些。
有什么想法吗？
浏览 0提问于2015-05-06得票数 1
回答已采纳
我想要固定列的宽度，当动态添加新列时，x轴滚动添加并固定条列的宽度，
但是目前条形图自动响应条形图的列宽，那么如何在条形图chart.js中添加带有x轴滚动的固定宽度呢
单击以获取此链接
(https://jsfiddle.net/Luaf2tm4/1872)
浏览 1提问于2018-06-20得票数 0
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<canvas id="myChart" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/
浏览 1提问于2017-05-21得票数 0
1回答
Chart.js额外未定义列
、、、、
我从chart.js下载了一个示例和修改后的条形图示例，在执行代码之后，在条形图中生成了一个额外的列。这是chart.js中的一个bug吗？或者代码有问题吗？如果是chart.js问题的话，请建议我画一个条形图的其他选择。谢谢
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
</head>
浏览 3提问于2016-01-13得票数 0
回答已采纳
我使用的是chart.js的条形图。除了酒吧之外，一切都很好。它们没有背景颜色，甚至不是默认颜色。我可以看到图表的顶部边框，当我将鼠标悬停在条形图上时，我看到了带有值的工具提示。 这是我使用的代码： var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['< 30', '30 - 60', '61 - 90', '> 90'],
浏览 15提问于2019-09-12得票数 0
我正在尝试根据该值更改用chart.js制作的条形图的背景颜色。 我找到了很多示例，但我在chart.js文档(https://www.chartjs.org/docs/latest/charts/bar.html?h=backgroundcolor)上读到背景颜色是可脚本化的。 我找不到在哪里以及如何配置选项以实现此结果。
浏览 19提问于2020-12-16得票数 0
回答已采纳
1回答
我正在尝试编程一个同位素模式计算器，并想要可视化的结果模式，它应该看起来像这样:同位素模式 因此，我考虑使用条形图和chart.js。然而，我发现的所有示例都有几个月或几年来标记x轴。但我需要一个“正常”的x轴，就像散点图类型一样，这样条形图就会包含在数字之间，而不是总是在标签的正上方。 这可以使用chart.js (或替代方案)来完成吗？ 谢谢你，https://i.stack.imgur.com/Jqtl8.png
浏览 12提问于2021-11-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
