c3.js减小x轴的宽度
c3.js是一个基于D3.js的JavaScript图表库，用于创建可交互的、动态的数据可视化图表。它提供了丰富的图表类型和配置选项，使开发者能够轻松地创建各种类型的图表，包括折线图、柱状图、饼图等。
在c3.js中，要减小x轴的宽度，可以通过调整图表的配置选项来实现。具体来说，可以使用size.width选项来设置整个图表的宽度，然后使用axis.x.tick.width选项来设置x轴刻度的宽度。
以下是一个示例代码，展示了如何使用c3.js来减小x轴的宽度：
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns: [
['x', 'Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
['data', 30, 200, 100, 400, 150]
]
},
axis: {
x: {
type: 'category',
tick: {
width: 20 // 设置x轴刻度的宽度
}
}
},
size: {
width: 500 // 设置整个图表的宽度
}
});在上述代码中，tick.width选项设置为20，表示x轴刻度的宽度为20个像素。size.width选项设置为500，表示整个图表的宽度为500个像素。
关于c3.js的更多信息和使用方法，可以参考腾讯云的产品介绍页面：c3.js产品介绍。
相关·内容
1回答
我目前正在尝试从lattice包构建一个简单的wireframe图，但它包含沿y轴的几百个点。这会导致地块被线框网格淹没，你所看到的只是一个黑色的质量块。我知道我可以用col=FALSE完全删除它们，但是有没有办法限制网格中离y轴的线的数量，以便可以看到drape=TRUE颜色？
levelplot(my.data, xlab = "x", ylab = "y", zlab = "x", drape = TRUE, screen=list(z=0, x=-70, y=0), aspect = c(1, 1))
浏览 6提问于2015-12-10得票数 4
2回答
在c3.js中是否有一种方式来格式化轴来给它“很好”的值。例如，X轴从0开始，500增量到2000年的最大值？
浏览 3提问于2015-09-07得票数 0
回答已采纳
我注意到Graphics.MeasureString在不同分辨率下的奇怪行为。
对于默认分辨率(96x96)，我测试的不同字体大小之间存在线性关系。
但是，如果我将其提高到512 x 512，那么线性关系就消失了，并且在使用度量字符串时发生了一些非常奇怪的事情。(见下面的4个图)
如果我将图形对象的分辨率保留为默认大小，并测量字体大小，以下是字体大小和字符串宽度之间的关系：
图形对象，默认分辨率(96)：
字体大小(X轴)、特定字符串的宽度(Y轴)
字体大小(X轴)、特定字符串的高度(Y轴)
但是，如果我更改了分辨率
图形对象，512分辨率：
字体大小(X轴)、特定字符串的宽度(Y
浏览 4提问于2012-03-02得票数 3
回答已采纳
1回答
C3.js自定义X轴
、、、
我用的是C3.js。我有一个网格，它包含几个图，它们位于X轴的相同值上。我能让绘图的位置取决于X轴的值吗？
我试着使用c3js轴库，但是它没有帮助：
axis: {
x: {
type: 'category',
categories: ['1235', '2523', '2563', '1234']
}
}
小提琴演示：是我目前拥有的。
但其结果应如下：
浏览 1提问于2016-03-11得票数 1
回答已采纳
我有一个C3.js条形图，我试图在x轴和图例之间添加一些间距，以避免以下视觉上的不愉快：
我已经尝试做了以下工作，但它对图表没有任何影响：
#stacked_bar_chart_container .c3-axis-x {
margin-bottom: 5px;
}
我甚至尝试用.c3-legend-item做同样的事情，但是用margin-top: 5px;代替，但是它仍然没有效果。
我还想指出，通过删除#stacked_bar_chart_container (此图绑定到的div容器)，仍然没有任何效果。
浏览 2提问于2019-07-05得票数 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
回答已采纳
1回答
是否可以使用C3.JS图表将X轴刻度和文本与列数据值分开设置？
我已经加载了24小时的数据，但时间戳可能是该时间段内的任何时间。我被要求每隔90分钟提供X轴刻度线标签。
浏览 5提问于2017-02-28得票数 3
回答已采纳
在C3.js中，有一种方法可以在放大时重新缩放y轴。X轴是否存在类似的函数？
图表中类似的代码
var visualizeThis = c3.generate({
bindto: '#this',
data: {
x: 'Dates',
columns:[
dates,
dataPoints
]
},
axis: {
x: {
type: 'timeseries',
tick:
浏览 0提问于2017-07-18得票数 1
我用C3.js绘制下图，但月名没有连续显示在x轴上，甚至数据也显示出来，请告诉我如何解析x轴数据，因为x轴数据应该像2017年3月、4月-2017年、5月-2017年、6月-2017年、7月-2017年……等等。
var chart = c3.generate({
bindto: bindingElement,
data: {
x:'x',
columns: plotData,
order:false,
type: 'bar',
groups: datag
浏览 1提问于2017-09-19得票数 1
回答已采纳
我正试图使用plt.subplots在稍微非矩形的数据集上创建一个4x2图(x轴范围小于y轴范围)，并使用make_axes_locatable分配色条，使颜色条很好，并使用子图进行刷新。我总是在两个子图列之间有巨大的垫子/边距，我怀疑这两个子图列的来源是彩色的.我尝试过很多堆叠溢出问题(例如使用fig.subplots_adjust()、constrained_layout=True等)。但没有结果。两列之间的页边距非常大(参见下面的img )，使图像不可读.
任何输入都将不胜感激！用于复制问题的代码：
import numpy as np
import matplotlib.pyplot
浏览 5提问于2022-05-18得票数 2
回答已采纳
1回答
我在我的项目中使用了c3.js时间序列。X轴的文本重叠
当将浏览器放大到500时。
如何修复它？
等待你的回复。
浏览 3提问于2015-09-08得票数 0
0回答
C3.js，y轴时间
、、、
使用C3.js，我试图生成一个图形，它的x轴是一个线性公里列表，y轴是相应的时间格式MM:SS。
我所能生成的最好的结果是下面的结果，这与我正在寻找的结果相反。这将生成一个图表，其中x轴上有时间，y轴上有里程。谁能告诉我如何才能转换到下面生成一个图形与x轴的KMs和y轴的时间。谢谢。
var km_chart = c3.generate({
"data": {
"x": "time",
"y": "kms",
"columns": [
浏览 7提问于2016-12-30得票数 0
1回答
我使用C3.js图表库来绘制我的数据。
我需要显示一个小时尚格式的数据。我的要求是，我必须用平山上的图像替换图形的X轴。基本上，我想隐藏默认的X轴，用图像替换它。我找不到任何方法去做。
我正在使用这个作为一个在Android上的网页视图。在Android或Javascript中有什么诀窍吗？？
浏览 4提问于2015-09-08得票数 0
回答已采纳
0回答
以下是我的输出图像：
我在C3中有一个分组条形图。我已经滚动了关于数据的x轴。当滚动x轴时，我的y轴也随之移动。如何确定Y轴在屏幕上的固定位置？由于我必须表示大量的数据，所以我希望x轴和y轴上的滚动需要固定，条形宽度需要与以前相同，因为随着数据数量的增加，条形宽度会自动减少。
下面是我的代码：
$(function() {
var months = ['Jan 2016', 'Feb2016', 'Feb2016', 'Jan 2016', 'Feb2016', 'Feb2016'
浏览 15提问于2018-07-12得票数 0
1回答
根据C3.js网站的例子，我试图为图表上的x轴提供自定义标签。
结果应该如下所示：
我尝试遵循C3.js:c3js.org/samples/axes_x_tick_values.html.提供的“X轴滴答值”示例
我试过使用“timeseries”和“分类”(但没有效果)，这个例子如下：.c3js.org/samples/taxized.html
以下是我在JS上的一次尝试：
这是javascript：
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'x',
columns:
浏览 4提问于2017-08-24得票数 3
回答已采纳
2回答
目前，我正在使用核心图的散点图绘制某些数据。圆的大小取决于特定值出现的频率。在绘图时，我发现一些圆是重叠的，交叉x和y轴。
是否有任何方法来检查一个圆(例如，绘图点)是否横过轴，并自动调整圆的大小，使其不交叉轴？
编辑-轴是固定的。所以我不能换斧头。
编辑-我想知道使用哪种方法来确定一个圆是否交叉/接触x或y轴。目前，当圆的大小为12，y坐标为1.1时，圆重叠。我无法理解大小是如何被映射到圆上的情节。谢谢。
浏览 9提问于2013-12-16得票数 0
回答已采纳
1回答
我使用C3.js创建了一个与此非常相似的条形图，但问题是为条形上的每个点设置一个关于x轴上的值的阈值。例如，当目标是x轴上的< 10%时，在y轴上的10%标记上应该有一条虚线，对于后续的值，即<3%, <2% and <1%，也应该发生同样的事情。
我的问题是，请您如何创建阈值或在图表上设置一个标记，就像在模型上一样？提前谢谢。
浏览 1提问于2015-07-29得票数 0
回答已采纳
1回答
我有一个我用c3.js库做的图表，我想把y轴的宽度改为更细的
我尝试像这样直接在类中添加样式，但不起作用
.c3-axis-y path {
stroke-width: 1px;
}
我还想沿着x轴显示网格，就像文档中提到的那样，但它们没有像预期的那样显示
grid: {
x: {
show: true
}
}
我怎样才能解决这两个问题呢？
浏览 7提问于2019-06-16得票数 0
2回答
我想用c3.js库绘制一个图形，它显示x轴上的周间隔，如下图所示：
我有一个JSON文件，其中有几个日期，我想使用它：
{
"foo": 1,
"date": "2016-09-20"
},
{
"foo": 2,
"date": "2016-09-21"
},
{
...
}
我该怎么做？
浏览 11提问于2016-09-29得票数 0
1回答
我使用c3.js创建线和条形图，我想改变x轴和y轴值的颜色。因为我想要黑色背景的图表，所以文字/值的颜色在x轴和y轴必须是白色的，才能看到。我试过使用下面的css，但它不起作用。
#chart .c3-text
{
color: white;
}
#chart c3-axis-axis
{
color:white;
}
#chart c3-text
{
color:white;
}
有没有办法改变图表上文字的颜色？
编辑 html代码：
<
浏览 1提问于2015-09-29得票数 9
回答已采纳
是否可以在也有多个y值的C3.js图表中定义X轴值？
我正在尝试创建一个混合的条形图和折线图，其中包含两个y轴和x轴的自定义标签。
结果应该是这样的：
我引用了C3.js示例来指导我的尝试: c3js.org/samples/axes_y2.html和c3js.org/samples/axes_x_tick_values.html我能够生成具有两个y轴的混合线形图和条形图。但是，当我将in标签添加到x轴时，我会丢失第二个y轴：
我可以让图表显示两个y轴：
<html>
<head>
<link href="https://cdnjs.clou
浏览 10提问于2017-08-23得票数 3
回答已采纳
我是jqplot的新手，当我想绘制条形图时，x轴是日期，间隔是1天。这是我的代码的一部分：
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize:'10pt',
},
浏览 1提问于2013-03-06得票数 5
回答已采纳
1回答
我正在使用C3.js来生成折线图。创建SVG后，我将使用canvas将其转换为.png图像。
一切正常，但x轴名称是从图像中裁剪出来的。我给出的画布宽度和高度与SVG的宽度和高度相同。
canvas.width = image.width;
canvas.height = image.height;
感谢您的帮助。
这里是小提琴：
浏览 1提问于2016-11-10得票数 1
1回答
我想向用户展示他过去一周的财务状况，通常情况下，用户在七天中的每一天都不会有财务数据。但是，对于c3.js，它会将‘终结点-值’扩展到轴的末尾，有什么方法可以防止这种情况发生呢？或者，我是否必须在每个系列的末尾手动添加一个零值，这样它就不会被c3.js扩展？
浏览 6提问于2015-09-14得票数 0
回答已采纳
1回答
我刚刚开始使用c3.js，我还不知道如何在x轴中指定滴答的值。值是type1，type2，type3.这是我的密码：
$(document).ready(function(){
var mammoReconstructionsAcceptedChart = c3.generate({
bindto: '#mammo_reconstructions_accepted',
data: {
x: 'x',
columns: [
['x',
浏览 2提问于2015-05-21得票数 4
回答已采纳
我正在使用ggplot2生成一个相当简单的比例图，该图与一个整数值预测值相对应。我使用geom_errorbar来显示每个点估计的不确定性。
例如：
require(ggplot2)
mydata <- data.frame(my_x = 70:99,
my_y = seq(0.7,0.3,length.out=30),
my_lower = seq(0.6,0.2,length.out=30),
my_upper = seq(0.8,0.4,length.
浏览 1提问于2014-06-19得票数 3
1回答
我使用的是c3.js，并且我需要y2轴，所以我添加了以下代码：
axis: {
y2: {
show: true
}
}
但刻度与我的数据值不对应:我发现0,5,2,2,1，而我的数据值上升到20。当我添加：
axis: {
y2: {
show: true,
inner: true
}
}
这很奇怪，但它给出了正确的值，但是我的客户不想让刻度在里面。它是来自c3.js的bug吗？你能帮我修一下吗？
谢
浏览 1提问于2017-05-02得票数 1
我正在尝试将Y轴标题放在Y轴的右上角，就在图表标题的正下方。但是，当我插入轴标题时，整个图形向右移动。我尝试使用spacingLeft来设置图表的位置，但是没有任何变化。有没有办法即使我添加了轴标题也能保持图表的位置？
下面是我的代码：
$(function () {
$('#container').highcharts({
chart: {
marginBottom: 80,
spacingTop: 20
},
xAxis: {
categories: ['Jan', 'Feb&#
浏览 1提问于2014-04-15得票数 0
Gnuplot，一个很棒的包...我爱死它了。但我们也可以有我们的口角，就像任何一对一样:-)这一次，我想简单地画出方程的根:假设是一个二次型，以使事情简单。然而，我只希望在x轴上出现两个漂亮的圆点，表示二次曲线穿过x轴或y=0轴的点。换句话说，根(当它们是真实的时候)。我不想用数据文件这样做...我想让gnuplot计算根并绘制它们。
首先，我的尝试是:单点并不是gnuplot想要你绘制的，它喜欢一个很好的大范围的值。最好填满整个画布的宽度。
可以在您的图上的某个坐标上定位一个矩形，但我想要一个圆点。目前，我正在研究如何在这一点上做一个微小的填充多边形。我已经尝试过“示例”选项，但它似乎没有
浏览 2提问于2009-06-10得票数 1
1回答
我有115列，我想在x轴上绘制列名。但是列名彼此重叠。Y轴具有单行值。
features = fdf.iloc[0] # single row
features.sort_values(ascending=False).plot(kind='bar')
plt.xticks(rotation=90)
plt.show()
这是图表，因为您可以看到x轴标签不清楚。
浏览 1提问于2021-10-23得票数 0
我试图在c3.js中创建一个包含百分比的图表，但是y轴范围似乎被打破了。无论我做什么，最小/最大值似乎会使我输入的内容增加15个。
下面的代码从0到~15绘制了一些图。如果我把y最大值设为10，它就开始上升到25。这令人愤怒。
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3
浏览 1提问于2014-09-15得票数 10
回答已采纳
1回答
我试图在我的C3.js图上设置轴的样式，我知道要做到这一点，我必须为C3.js代码修改css文件，但是我在这个文件中所做的这些更改适用于我站点上的每个C3.js图表。我的问题是，我怎样才能对我的图表中的一个进行修改。
例如，这是我想要更改的样式：
.c3 path, .c3 line {
fill: none;
stroke: black;
}
这就是我如何将C3.js图表添加到HTML中的方式：
<div id="scan_duration_chart_container"></div>
在创建图表时，我添加了字段bindto: '#s
浏览 0提问于2019-06-27得票数 1
回答已采纳
1回答
我试图用json中的c3.js显示样条图，并将x轴显示为timeseries。
X轴看起来乱七八糟。它不识别日期，而是只显示一列。您可以检查下面的图像。
window.all = [
{
report_date: "2019-03-15 15:00:00",
swipes_count: 132556,
results_count: 123,
},
{
report_date: "2019-03-15 15:05:00",
swipes_count: 14255
浏览 0提问于2019-03-18得票数 0
回答已采纳
1回答
我用的是C3.js两个Y轴。我有两个数据系列：
data: {
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, null, 230],
[80, null, 300],
[90, null, 320],
],
regions: {
'
浏览 2提问于2015-03-19得票数 11
回答已采纳
3回答
我有一个特定的JSON输出，我需要将其转换为C3.js折线图的x轴和y轴，但它似乎不像当前格式化的方式：
{
"results": [
{
"param": "x",
"val": [
1,
2,
3,
4
]
},
{
"param":
浏览 0提问于2014-12-30得票数 5
回答已采纳
我花了很多时间在c3的文档和例子上，但一直未能找到一种方法来卸载或隐藏一个类别的图表使用API函数。移除线条或条形线很容易，但移除x轴类别更有挑战性。这是我的图表的简化版。
var genderChart = c3.generate({
bindto: '#chart-gender',
data: {
json: [
{
Disease:"Mumps",
"Female":231,
"Male":19
浏览 2提问于2015-04-21得票数 1
回答已采纳
1回答
我在一个iPad应用程序的图形上工作，我能够完美地绘制图形，但我不知道如何在y轴或x轴的最大值和最小值之后结束。现在，我只能处理轴标签(移除、隐藏、更改值)，但直线仍然在那里。
浏览 0提问于2012-07-03得票数 0
回答已采纳
请看一下从Gnuplot创建的附图。我正面临着两个问题。
1)密钥框(图例框)左侧空白。有没有办法去掉多余的空白？我既不想丢失密钥箱，也不想在使用的希腊字母上妥协。另外，请注意，最终输出格式必须为eps。
2) y轴和y标签之间也有太多的空间。如何优化？请帮帮忙。
浏览 13提问于2016-07-20得票数 4
1回答
差不多就是标题了。我有一个序列号数组，我想把它做成x轴.数组数据本身是通过PHP从数据库中提取出来的。然后，json_encode对其进行编码，并将其生成一个js数组。我遇到的问题是，在生成C3js图时，json:和columns都有一个单独的部分。
var jsarray = <?php echo json_encode($array) ?>;
var chart = c3.generate({
bindto: '#chart',
data: {
x: 'js_array',
浏览 2提问于2016-01-29得票数 0
回答已采纳
1回答
我正在学习一个教程，它说，我们将设置图像模式的方面适合。
我想知道这意味着什么？
我去了维基百科，上面写着：
图像的高宽比描述了它的宽度和高度之间的比例关系。通常表示为用冒号分隔的两个数字，如16:9。对于x:y长宽比，无论图像有多大或多小，如果宽度被划分为长度相等的x个单位，而高度用这个相同的长度单位来测量，则高度将被测量为y单位。
所以，应用我在维基百科上发现的方面适合我的理解，为保存了图像的相同的纵横比，但让它适合它的容器。**是真的吗？**
如果是，在这种情况下，我想知道它在哪个轴上适合first
比方说，我的图像的纵横比是6: 12，这意味着，如果图像的宽度被划分为6个相等的
浏览 1提问于2015-11-06得票数 1
我有一些基于二分计数数据创建的ggplot对象。我使用ggarrange将它们组合在一起。在这个函数中，有一个创建共享图例的选项，但我看不到创建共享x和y轴标签的方法。此外，图形的间距非常奇怪-在两个图形列之间有一个巨大的差距，并且在共享图例之前还有大量的垂直空间。因此，总而言之，我希望能够创建共享的x和y轴，并最小化不必要的垂直和水平空间。 我查看了以下线程：ggplot2 grid ggplot: align plots together and add common labels and legend Add common axis titles with lines/arrows f
浏览 463提问于2020-11-10得票数 4
2回答
通过从提供的CSV文件中加载数据，我使用C3.JS创建了一个多系列的线条图。我可以绘制图形，但是我还没有找到，如果只能从CSV绘制某些列，那么我的图形就是绘制所有CSV列。
我的CSV看起来是这样的：
Sex,Age,L,M,S,P3,P5,P10,P25,P50,P75,P90,P95,P97
2,0,-1.298749689,34.7115617,0.046905108,31.93019666,32.25089861,32.75948527,33.65186554,34.7115617,35.85124044,36.9534983,37.65137722,38.12110271
2,0.5
浏览 4提问于2014-10-23得票数 3
回答已采纳
1回答
我正在尝试使用D3实现两个x轴(长轴和短轴)。我已经把它们都显示出来了，但是我的第二个轴没有正确地显示域。
下面是关于codepen的代码：
g.append("g")
.attr("class", "axis axis--x2")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x2));
我需要将月份的日期显示为主要刻度(月份)之间的次要刻度，它应该如下图所示。
浏览 1提问于2017-04-01得票数 1
1回答
我想从c3.js定制一个甜甜圈图表，所以它有2层。
这是非常基本的基于c3.js的甜甜圈图表的代码。
var chart = c3.generate({
data: {
columns: [
['bulls', 30],
['lakers', 50],
],
type : 'donut'
},
});
这是一个类似于我想要实现的东西的图像：
我确实找到了这个，但我不确定如何在c3.js中实现它。这是我的的链接。
浏览 6提问于2015-06-25得票数 1
我正在尝试在ggplot2中准备一些图像，其中x轴对于我的每个图都是不同的。例如，绘图1的X轴跨度为200个单位，绘图2的X轴跨度为300个单位，等等。我想保存这些图像，以便我的不同图像的X轴单位都是成比例的，并且彼此之间可以直接比较。有人知道怎么做吗？当我使用ggsave时，它们都保存为相同的长度，而与x轴单位无关。
浏览 36提问于2020-01-06得票数 0
回答已采纳
1回答
嗨，我试图添加一个图像在c3.js线图x轴，但不知怎的图像没有显示。我可以在控制台中看到图像标记，但它在图表中是不可见的。
我的代码:d3选择(“.c3-轴-x”)
.append("image")
.attr("class", "footerLogo")
.attr("xlink:href", "http://upload.smileyswelove.com/uploads/2854/smiley-10225.jpg")
.attr("width", "70px")
浏览 2提问于2016-03-15得票数 0
回答已采纳
我正在使用AJAX将新数据加载到c3.js图表中。我想在y轴标签上更改的东西之一。举个例子：
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
['download', 30, 200, 10
浏览 1提问于2016-02-18得票数 2
回答已采纳
1回答
我试图使两个引导列具有相同的高度和响应性。到目前为止，我有两列的高度相同，但随着屏幕尺寸变小，一列变得比另一列短。如下所示：
为了制作这两列，我使用了Bootstrap 3。
我的HTML：
<div class="col-md-6">
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500"
浏览 1提问于2018-06-07得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
