工具提示中的c3.js时间格式
c3.js是一个基于D3.js的可视化库，用于创建各种交互式图表和图形。工具提示（Tooltip）是c3.js中的一个功能，用于在鼠标悬停或点击图表元素时显示相关信息。
c3.js时间格式是用于在图表中显示时间轴的格式。c3.js支持多种时间格式，常用的有以下几种：
- ISO 8601格式：YYYY-MM-DD（例如：2022-01-01） 这是一种常见的日期格式，用于表示年、月、日。在c3.js中，可以使用ISO 8601格式来显示时间轴，以便在图表中按照日期进行数据展示。
- Unix时间戳格式：秒级或毫秒级 Unix时间戳是从1970年1月1日00:00:00 UTC开始计算的时间值。在c3.js中，可以使用秒级或毫秒级的Unix时间戳来表示时间轴，以便在图表中按照时间顺序展示数据。
- 自定义时间格式 c3.js还支持自定义时间格式，可以根据需求定义特定的时间格式，例如："YYYY年MM月DD日"或"MM/DD/YYYY"等。
使用c3.js的时间格式，可以在图表中灵活地展示时间相关的数据。根据具体的需求和数据类型，选择合适的时间格式可以提高数据的可读性和可视化效果。
腾讯云提供了云原生服务，其中包括云原生应用平台TKE（Tencent Kubernetes Engine），可以帮助用户快速构建、部署和管理容器化应用。TKE提供了高可用、高性能的容器集群，支持自动伸缩、负载均衡等功能，适用于各种规模的应用场景。更多关于腾讯云TKE的信息，请访问：腾讯云TKE产品介绍
请注意，以上答案仅供参考，具体的技术选型和产品推荐应根据实际需求和情况进行评估和决策。
相关·内容
我有一个c3.js线图，它代表了两个值的演变。我需要线条图的工具提示是一个饼形图(tooltip =另一个c3.js图)。
以下是我的成功之处：
// c3 - custom tooltip
function generateGraph(data1,data2) {
console.log(data1.name + '\t' + data1.value + '\t' + data2.name + '\t' + data2.value);
var chart1 = c3.generate(
{
浏览 7提问于2015-09-02得票数 2
我正在使用c3库来绘制图表。
当我们把鼠标放在c3.js中甜甜圈图的标题上时，有人能建议我如何将值之和作为鼠标超过事件(请不要在图片中考虑图表的工具提示，它的标题是甜甜圈，我需要它的标题就像工具提示一样)
例如：
var chart = c3.generate({
data: {
columns: [
['Monday', 70],
['TuesDay', 20],
['Wednesday', 30],
['Thursd
浏览 1提问于2017-06-27得票数 0
我正在使用c3.js创建一个图表，这是我发现的一个问题。如果数据点的浮点数x值为负值，则工具提示会将该值舍入为最接近的整数。
您可以尝试这样做，只需更改示例中的数据。只需将其中一个x值更改为负的浮点值，然后将鼠标悬停在该点上，并注意工具提示报告的x值。
有没有解决这个问题的办法，或者是否有人遇到过类似的问题？
浏览 1提问于2015-03-24得票数 1
1回答
我在c3.js中有下面的代码来创建一个堆叠的条形图。
x=['a','b','c'];
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200],
['data2', 130, 100, -100],
],
type: 'bar',
groups: [
['data1', 'data2&#
浏览 0提问于2017-07-11得票数 0
回答已采纳
1回答
我有一个c3.js图表，它有4个数据集。是否可以只为1组数据设置工具顶部？
从下面的代码中，我只想为data4显示工具提示。
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data
浏览 0提问于2018-11-19得票数 0
回答已采纳
1回答
我的图表显示如下
如何仅更改工具提示中的日期格式，以便将年份包括在其中？
我知道可以添加到tooltip属性中的formatter，但是当前的默认工具提示很好，只需要显示年份。
这是一个日期时间的情节。在其中，我传递了UNIX日期时间和值集对象的数组。
浏览 4提问于2015-06-30得票数 0
回答已采纳
1回答
我有一个图表，其中悬停显示了所有由条形图表示的元素，但它们太多了，这就产生了一些问题，比如滚动条的外观。 ? 我想知道是否有一种方法可以只显示当前悬停的栏。在c3.js文档中，我看到这个属性的存在是为了更改工具提示的内容，但我不知道如何获得它所悬停的当前栏。 有了这个： tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
console.log(d, defaultTitleFormat, defaultValueFormat,
浏览 45提问于2019-10-08得票数 2
假设我有一个带有两个系列的图，一个是OHLC和line。我想要定制工具提示，例如，我不想在工具提示中显示时间戳、OHLC系列的Open和High value，我想在line系列工具提示中添加一些自定义消息。
如何在Highchart中实现自定义工具提示？
$(function () {
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
selected: 2
},
title: {
text
浏览 1提问于2013-06-18得票数 0
标题说明了一切。我有一组数据想要在工具提示中显示，但我不想在实际的条形图中显示。我尝试包含数据，然后使用hide: ['dataToHide']，然后继续使用
tooltip: {
show: 'dataToHide'
}
但我就是不能让它工作。我知道我可以设置工具提示的格式，但每当我自己插入任何内容时，工具提示的格式似乎都会变成空白。此外，我不确定如何将另一个选项添加到工具提示本身。
浏览 0提问于2016-03-07得票数 4
influxDB时间戳如下所示：
2015-01-29T21:55:43.702900257Z
问题是，当我用C3.js生成图形时，应该为x-axis使用哪些选项
我所犯的错误：
“未能解析x '2015-01-29T21:55:43.702900257Z‘截至日期对象”
也许这个能帮你做一些快速的测试.我认为问题在于时间安排，但欢迎任何其他建议：
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
浏览 1提问于2015-10-05得票数 11
回答已采纳
我有一个用json数据用c3.js生成的线条图
当前的图表非常简单
var chart = c3.generate({
bindto: '.balanceChart',
data: {
url: '/data',
mimeType:'json'
}
});
json数据：
{
data1: [1000,1240,1270,1250,1280]
data2: [1000,240,30,-20,30]
}
图表看起来很好，而且在那里，但它目前正在绘制这两组数据，我希望data2是绘图的工具提示值。
浏览 3提问于2016-10-17得票数 0
回答已采纳
我一直在搜索c3.js参考，但找不到任何可以使值出现在栏中的设置。有工具提示很酷，但在我的情况下，直接在条形栏中显示值会更容易……
浏览 0提问于2016-06-27得票数 5
1回答
我使用的是C3.js的0.7.1版本，我用以下代码创建了一个甜甜圈图：
var chart = c3.generate({
data: {
columns: [
['Critical', 100],
['High', 200],
['Informational', 300],
['Medium', 400],
['Low
浏览 0提问于2019-06-25得票数 1
回答已采纳
使用c3.js，我得到了一个包含多条线的线形图。工具提示正确地显示在各个数据点上，我可以使用mouseover属性在数据点悬停时触发。
我需要在鼠标悬停在某条线的任意位置时，更改该图中某条线的颜色。似乎线条被其他形状遮住了悬停事件，因为我甚至不能让pain JS或CSS来触发事件。有没有办法让c3.js在鼠标移过或移出一行时触发事件？
浏览 8提问于2016-04-27得票数 2
2回答
我用3个数据点设置了我的列图。每个x值都是一个日期时间值--一天内不同的时间。
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [
[Date.UTC(2013, 5,
浏览 4提问于2013-10-16得票数 0
回答已采纳
1回答
我试图从mysql数据库中使用php获取的数据构建c3.js线图。
var chart = c3.generate({
bindto: '#linear-chart',
data: {
json:lineChartData,
keys:{
value: ['date', 'temp'],
}
},
zoom: {
enabled: true
}
});
来自mysql的lineChartData - json数据，如下所示：
[{date: Wed Mar 13 2019, tem
浏览 1提问于2019-03-18得票数 1
回答已采纳
1回答
我有一个c3.js堆叠的条形图，当你悬停在小叶地图上时会更新，我需要工具提示是静态的，否则用户将在实际到达之前悬停在地图的其他区域并更改条形图中的数据。然而，我是编程新手，尤其是C3新手，我不知道如何使工具提示成为静态的。另外，有没有人知道以后如何设置工具提示的样式？我只在网上找到了非常复杂的例子，但我觉得在生成图表后，我应该可以在某个地方做。任何帮助都将不胜感激！
下面是我的代码：
function getMiniChartData(properties) {
var values = [
['rape', rape[properties['gss_code&
浏览 1提问于2016-05-17得票数 0
我正尝试在我的应用程序中实现饼图，但鼠标悬停时不显示piechart工具提示
下面是我的代码
<link rel="icon" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.2/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudfla
浏览 0提问于2018-06-19得票数 0
在C3条形图中，当我们将宽度比设置为小于1时，条形图将被挤压，但工具提示区不会。我们如何将工具提示设置为只在栏上显示，而不是像下面的示例那样显示在整个区域上。 var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230,
浏览 11提问于2020-01-24得票数 0
下面的图表使用了C3.js和一些JSON数据。如何使工具提示显示每个单独栏的数据，而不是表中的所有条形数据？
var chart = [
{'0-9': 249.8740575482693,
'10-19': 238.2744788358169,
'20-29': 369.10362988529357,
'30-39': 156.9635033529556,
'40-49': 266.00448275832673,
'50-59': 283.5138392550998
浏览 3提问于2016-12-13得票数 0
回答已采纳
我有一个时间序列C3.js图表，但我还没有找到一种方法来只显示第一个和最后一个X标签刻度。我在Canvas.js中看到了一个解决方案，但不确定如何在C3.js中应用相同的方法。非常感谢！
浏览 1提问于2018-07-24得票数 0
1回答
更改C3.js中图表的源URL
、、、、
我有一个网页，它用C3.js显示图表。数据来源是一个url。现在，我想添加引导日期时间选择器的功能，以便在特定时间戳之后对数据进行查询。选择日期并提交日期。应该更改源url，它应该包含时间戳的查询参数。是否可以使用C3.js来刷新源url。我怎样才能做到这一点？
浏览 7提问于2015-11-02得票数 0
回答已采纳
我有一个this chart，它从CSV中获取数据，按其中一列旋转它，并用线显示几个时间序列。还会自动生成一个工具提示，从透视表列中获取名称。 ? 唯一的问题是日期/时间显示为时间戳。有没有一种方法可以让它看起来更漂亮，就像实际的日期+时间，就像它在X轴上的显示方式一样？ 我知道我可以为工具提示指定所有值，如下所示 "tooltip": [
{
"field": "date",
"type": "temporal",
"tit
浏览 29提问于2021-04-27得票数 1
VS2008 (C#)中的工具提示文档是否可以不仅显示部分文档，而且显示全部文档？
例如。
/// <summary>
/// Method description
/// </summary>
/// <param name="param1">Parameter no 1</param>
/// <param name="param2">Parameter no 2</param>
当我将鼠标悬停在方法调用上时，它只显示“方法描述”文本。我也希望看到参数或返回。也许还有其他可能的文档。
我
浏览 1提问于2009-09-18得票数 4
1回答
高图表的格式类别(x轴)
、、、
我有一个workingHighcharts堆叠的区域图，我正在工作。X轴由划时代的时间戳组成，但我想将它们转换为人类可读的时间。在过去，我做过这样的事情：
tooltip: {
formatter: function() {
return Highcharts.numberFormat(this.y) + ' packets<b> | </b>' + Highcharts.dateFormat('%H:%M:%S', this.x);
}
让时间从一个划时代的时间到一个固定的时间，但现在的情况有点不同。在我
浏览 1提问于2015-06-12得票数 0
回答已采纳
在这个例子：中，通过使用axis>Label> Hover格式下的设计工具，我能够将时间x轴工具提示的格式更改为"%y/%m/%d %I:%M%p")。如何在代码中实现相同的功能？
我已经看过参考资料()了，在上面找不到任何东西。
浏览 2提问于2015-10-09得票数 1
回答已采纳
1回答
如何得到c3.js下的填充时间序列图，就像堆叠的面积图，但是x轴上的值仍然是时间序列。我使用PUBNUB的EON图表库，但它使用c3.js作为基础库。
eon.chart({
pubnub : pubnub,
history : false,
channel : 'orbit2',
flow : true,
generate : {
bindto : '#chart',
size: {
height: 240,
width: 380
}
浏览 4提问于2015-10-13得票数 2
回答已采纳
我有一个小应用程序，需要在满足特定条件时显示警报。我有一个mdi窗体和几个子窗体。现在，显示警报的最好方法是在mdi表单的右下角显示工具提示。虽然这是可行的，但问题是，我希望用户在阅读后关闭工具提示。
现在，vb.net提供的工具提示不支持单击事件。如果我给它一个长的持续时间，工具提示会一直打开，如果我给它一个短的持续时间，它会很快关闭。
我能做些什么？
我们将非常感谢您的帮助。
谢谢,
GR
浏览 0提问于2011-03-24得票数 2
我是JavaScript、D3.js和C3.js的新手。我有像这样的多线图。我想知道在C3中是否有可能在图表中只显示一条线(f.e.data1)。以及如何切换图表以显示第二个数据，同时关闭任何其他数据？如果有任何提示，我将不胜感激！
浏览 0提问于2014-12-05得票数 2
我正在使用Dotnet Highchart。我从一个总共有10列的数据库表中获取数据，并使用它的两列来显示图表。
我需要在工具提示(类摘要)中显示所有10列，但我不知道是否可以做到这一点？您能指导我如何将所有列的数据传递到表中并在工具提示中显示吗？
感谢您的时间和帮助。
浏览 1提问于2013-11-24得票数 0
在本例中，我希望在工具提示标题上显示180而不是0。我知道它可以像在中所做的那样进行定制。但我没有办法得到每列的总数。
浏览 2提问于2015-07-01得票数 6
回答已采纳
1回答
当值为0时C3.js隐藏工具提示
、、、、
因此，我使用C3创建了一个线条图，如下所示：
现在，当图表上的值为零时，我必须隐藏工具提示。我无法在网上或在C3文档中找到任何解决方案。
请帮帮忙。谢谢。
浏览 1提问于2018-09-18得票数 1
回答已采纳
我将Chart.js与Angular2结合使用。我正在输入(x，y)坐标。其中x是时间戳，y是不同的值。工具提示显示时间戳，而不是我希望看到的时间格式。在这里，我已经做了代码，请看看，并帮助我。。
我很容易理解x轴是如何显示时间的。Chart.js文档是可怕的，而且很难理解，我所有的怀疑都依赖于堆栈溢出。
下面是打印日期的图表选项。我无法理解在这里写什么工具提示选项。
private options = {
scales: {
xAxes: [{
tooltipFormat:'',
type: 't
浏览 0提问于2017-04-27得票数 2
回答已采纳
2回答
我试图更改c3.js图的图例的字体颜色，但没有成功。
使用chrome的样式检查器，我可以更改例如文本的字体大小，但不能更改颜色。
附加一个屏幕截图与上述属性(字体大小和颜色)。
有什么提示吗？
浏览 8提问于2016-09-23得票数 4
我有一张显示水位数据的线图。
该图表有一个工具提示，当您在鼠标上悬停时，它会显示值。见下文。
📷
我的问题是，为记录的流显示的小数位数是不同的。我想用小数点3位来显示它们。
这三个值都使用浮点数据类型存储在SQL中。警告和截止级别值是单个值(可以是小数点1、2或3位，但显示为3小数位)，其中记录的流量是存储到小数点8-10位的可变时间序列，但只显示为小数2位。(我想要三个。)
我看不到数据类型被更改或值已被舍入的任何地方。我已经删除和重新添加了时间序列，并改变了出现的顺序，但这并没有什么不同。我甚至在SQL中对数据进行了舍入，以查看PowerBi是否在嗅探数据以确定格式。
我发现所有的网络搜索
浏览 0提问于2020-04-02得票数 0
回答已采纳
1回答
谷歌图表尾随零
、、
我有一个谷歌图表，我正在使用
但是似乎不能让工具提示显示尾随的零！
我尝试将数据格式化为#.#中的格式，但如果有偶数，则不会显示小数！
即我的数据是:工具提示中的77.6，77.1，77.0，66.9，尽管77.0显示为77
我希望在工具提示中显示77.0。
我确认数据是77.0，所以google一定是在解析出来。
我也不想使用自定义注释，因为我喜欢股票工具提示的外观。
有什么想法吗？
浏览 4提问于2017-08-24得票数 1
我正在使用HighCharts，我想使用工具提示中的十字光标来帮助用户悬停特定的点。当该点悬停时，我希望在另一个div中显示该点的信息(即已完成)，但我希望阻止工具提示框出现。下面是“工作”代码：。如你所见，我做了一个显示:在工具提示中没有，但有一个“圆圈”仍然在那里。
感谢任何帮助:)
浏览 1提问于2011-04-10得票数 2
回答已采纳
1回答
我正在使用C3.js来绘制一些数据。我希望能够显示最后一个数据点系列的工具提示，点击按钮，甚至在图表呈现后默认情况下。有这样的事吗？他们的文档有一个关于tooltip.show的部分，但是没有关于它的文档。
浏览 4提问于2015-03-19得票数 5
回答已采纳
1回答
在演示站点中，有一个使用系列比较()的示例。
在本例中，每个系列都有相同日期时间的值。我要画的是几个系列，但每个系列都有自己的频率(即，每天一次，每小时一次，每10分钟一次)。它可以工作，但是工具提示显示：
当我们超过一整天的日期时，这三个值。
当我们超过全时日期时，每小时和10‘值。
当我们超过10‘日期时，只有10’值
是否可以始终显示这3个值？或者通过外推法推断中间值(最好)，或者在同一工具提示中显示3次日期/值。
诚挚的问候
浏览 0提问于2015-01-06得票数 0
我试着学习amCharts，现在我坚持从日期到日期更改工具提示格式。我现在有个小把戏：，我想把它从日期改为时间的工具提示标签在中是红色的。
我认为我应该修改代码的这一部分：
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness"
浏览 0提问于2018-03-09得票数 0
回答已采纳
1回答
我有跟踪问题。我向高图集提供数据。我提供的每一系列数据都有15分钟的时间间隔，只有1分钟的时间间隔。工具提示(在图表上的鼠标悬停)以这样的方式出现:每一分钟就有一个有1分钟间隔的系列的工具提示，而每15分钟就有一个用于所有系列的工具提示。
我希望他们每隔15分钟就出现一次。
以下是我的高图表配置：
{
chart: {
height: 500,
spacingRight: 70
},
title: {
text: ''
},
legend: {
enabl
浏览 4提问于2021-07-22得票数 0
回答已采纳
1回答
我有一个有N行的LineChart。一条线是固定的(直线与固定的y轴值和与所有其他线相同的x轴值，时间值)。在大多数情况下，只有固定行和另一行值会发生变化。两者都显示正确，但当我悬停在它们之上时，工具提示会显示固定行的数据。我需要停止显示工具提示中的固定行数据点，只显示另一行的数据(如果图表上没有固定行，则显示为ok )。
工具提示是：
<Tooltip
contentStyle={{ fontSize: 12 }}
labelStyle={{ fontSize: 12 }}
/>
固定线路是：
<Line
key="fixed-key"
is
浏览 5提问于2020-03-11得票数 1
我正在使用Vue.js和vue的包装库来绘制一个基本的线条图。数据以时间序列的形式出现，我对工具提示的显示不满意:对于图表上的一点，工具提示的格式是："2,016.957价格:1025美元“(对应于2016年12月)。
我想要的是工具提示有以下任何一种格式：“2016年12月价格:1025美元”或"2016.957价格:1025美元“。
虽然我可以用标准的Google库实现这些格式的显示，但我似乎找不到使用vue-google图表的解决方案。主要问题是，google.visualization.DataTable()是在幕后创建的；我所能做的就是将数组传递给它，并且无法进一步自
浏览 0提问于2019-01-27得票数 1
回答已采纳
1回答
我有一个散射序列，两个点具有相同的坐标。每个点都有不同的相关数据(例如，不同人的体重和身高--两个不同的人可以拥有完全相同的身高和体重)：
series: [ {
data: [{x:193.5, y:80.7, name:'danny'},
{x:193.7, y:90.7, name:'oren'},
{x:193.7, y:90.7, name:'josef'},
{x:195.5, y:80.3, name:
浏览 3提问于2013-02-25得票数 3
我有两个时间序列，我想‘分享’的工具提示。但是，我有一个问题，就是每个系列的第一点是对齐的，并且共享工具提示。其余的点稍微不对齐，因此不能同时显示在工具提示中。
这把小提琴将有助于证明这个问题。
如果悬停在第一点上，工具提示就会出现在这两个系列的条目中。但是下一个数据池在工具提示中只显示一个条目。
我可以征求您的意见吗？我错过了什么‘对齐’两个系列，以分享工具提示？很明显，仅仅加上
tooltip: {
shared: true,
}
谢谢。
浏览 0提问于2015-07-01得票数 2
回答已采纳
1回答
与C3工具提示交互后关闭它
、、、、
我正在学习在图表中使用C3.js，我想更好地定制工具提示功能。通常，当您在数据上悬停时会出现C3工具提示。他们不坚持，你不能与他们互动。
我在Stack溢出上找到了一些代码，用于添加超时和CSS以使工具提示持久，并允许用户与其交互，但我不知道如何使工具提示在结束后再次关闭，无论是用户单击图表或工具提示的某个位置，还是使用超时。我认为，在工具提示出现之后，将它永远保留在图表上是很烦人的。
应该有一个函数我可以调用或者重写，不是吗？我尝试添加onclick功能，这样当我单击一个数据池时，它会做一些事情，但是我没有找到一种方法让它做我想做的事情。我跟踪，想出如何做onclick。
data: {
浏览 4提问于2017-11-03得票数 0
回答已采纳
我一直试图为我的时间线创建自定义工具提示，但无法找到一种方法来显示嵌套对象的值以及原始类型。
数据示例：
{
id: 12345,
start_time: "2020-03-31T16:00:40Z",
end_time: "2020-03-31T18:30:40Z"
created_by: {
username: "mary_jane",
first_name: "Mary",
last_name: "Jane"
},
}
代码示
浏览 2提问于2020-05-11得票数 0
回答已采纳
我有一个图表，它可以显示各种天气数据，而且它做得很正确。
工具提示可以很好地处理系列中的数据，但我想以附加文本的形式向另一个数据数组中的每个数据添加一些附加数据。
第一个数据数组是
var hightemp = new Array(12.2, 12.9, 22.7, 26.0, 29.8, 31.5
,33.5, 30.5, 25.1, 23.6, 15.2, 13.2);
第二个是
var hightempT = new Array("at 16:44 on 29 January 2013"
浏览 2提问于2013-03-07得票数 0
我已经试了三天了，想让这个图表以我想要的方式显示出来。在我意识到分组条形图号被关闭之前，一切都是100%正常工作的。
示例:当底部栏值等于10，顶部栏值等于20时，分组栏的顶部为30。这是默认行为，但不是我想要表示数据的方式。我希望分组栏的顶部能够读取任何最高的数字，这将引导我找到表示数据的，这正是我想要的。
在重构了我的逻辑之后，到目前为止，是我所拥有的。如您所见，timeseries行被拆分，工具提示没有呈现正在悬停的数据组。
我的问题：
1)如何获得工具提示以呈现所有三个数据点(数量、价格、搜索)
2)如何巩固timeseries线路，使其不断开
任何帮助都是非常感谢的，这样我就
浏览 4提问于2017-09-25得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
