C3.js将折线图Y轴的标签位置更改为Y轴居中

2024-02-15

我需要更改 Y 轴标签在 Y 轴上的位置,当前的六个位置选项无法满足我的场景,我也尝试使用 d3 进行自定义,但仍然没有成功。

我创建了一个plnkr http://plnkr.co/edit/WzXVForyGJP01WJlAXj5?p=preview演示,并在中提交问题github https://github.com/c3js/c3/issues/2104.

  var chart = c3.generate({ 
  data: {
      columns: [
          ['data', 30, 200, 100, 400, 150, 250]
      ]
  },
  axis: {
      y: {
          label: {
              text: 'Y Axis Label',
              position: 'outer-top'
          } 
      }
   }
 });

有人知道该怎么做吗?

首先十分感谢。


与你所说的不同,你可以用D3定制它。只需选择标签(按类别)并设置transform:

d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")

这是演示:

// Code goes here
(function() {

  var chart = c3.generate({
    padding: {
      top: 10
    },
    data: {
      columns: [
        ['data', 30, 200, 100, 400, 150, 250]
      ]
    },
    axis: {
      y: {
        label: {
          text: 'Y Axis Label',
          position: 'outer-top'
        }
      }
    }
  });

  d3.select(".c3-axis-y-label").attr("transform", "translate(25,30)")


})();
<head>
  <link rel="stylesheet" href="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/c3.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/d3.js"></script>
  <script src="https://unpkg.com/[email protected] /cdn-cgi/l/email-protection/c3.js"></script>
</head>

<body>
  <div id="chart"></div>
  <script src="script.js"></script>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

C3.js将折线图Y轴的标签位置更改为Y轴居中 的相关文章

  • D3.js 如何将我的真实数据合并到饼图中

    我是 D3 和数据可视化的新手 在加载真实数据时遇到一些问题 您将在以下部分中找到我的代码 现在我有一些数据存储在数组中 现在我想做的是将数据库中的实际数据存储到饼图中 另外 如果我这样做 var mydata d3 json mydata
  • 用渐变色绘制一个 D3 圆

    如何用渐变颜色画一个圆 比如说 从黄色到蓝色的渐变 通常 要创建黄色圆圈 我们可以使用以下代码 var cdata 50 40 var xscale 40 var xspace 50 var yscale 70 var svg d3 sel
  • 将 D3 svg 保存为高质量图像

    有没有办法将 D3 SVG 图像保存为高质量图像 如果是的话请解释一下 截至目前 我正在使用以下代码将 svg 保存为图像 但我得到的图像质量不高 var canvas1 document createElement canvas canv
  • d3 转换改变了哪些属性?

    我试图了解 d3 中到底发生了什么转换 例如 var bars svg selectAll null data my values enter append rect statement before transition attr x 1
  • NVD3 - 更新数据时不均匀的刻度

    当我更新现有 NVD3 图表中的数据时 沿 x 轴的刻度不以固定间隔呈现 我正在创建一个multiBarChart数据来源于d3 json 数据表示某个日期范围内的点击次数 我有一个单独的日期范围选择器 可以更新图表的数据 我有以下内容来创
  • 选择 G 元素内的路径并更改样式

    本质上 我试图让除悬停的路径之外的所有路径都变成灰色 而选择的路径则保持其原始颜色 我已经能够将所有其他路径变成灰色 但是我在使用 select this 函数并实际访问我想要更改样式的路径时遇到了问题 看来我实际上已经成功地找到了 g 组
  • 使用 CSV 文件填充下拉列表 - d3

    我想在 html 中填充简单的下拉列表 使用 csv 文件中存在的值 我尝试类似的方法 但它不起作用
  • d3.js 和 Chart.js 之间的比较(仅适用于图表)[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在项目中多次使用过 Chart js 但从未使用过 d3 js 很多人说 d3 js 是最好的图表 javascript 框架 但没
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • d3 (v4) 树布局和打字稿:类型“HierarchyNode”上不存在属性“x”

    我正在尝试在使用时使用正确的 ts 类型d3 hierarchy具有树布局的根 例如 interface MyCustomGraphType id string children MyCustomGraphType let treeData
  • 如何在 d3.scale.ordinal() 中指定域?

    var W 100 var H 200 var data v 4 v 8 v 15 v 16 v 23 v 42 var x d3 scale linear domain 0 max x range 0 W var y d3 scale o
  • 如何使用数据对象中的值指定 d3.js 选择器?

    我在 Web 应用程序中使用 d3 js 描述我想要做的事情的最简单方法是查看下面链接的 Fiddle 但基本设置是我有一个包含数据对象的数组 my data id B text I want this text in B id C tex
  • D3js 多折线图 mouseOver

    我正在努力适应this http bl ocks org mbostock 3902569D3js 折线图示例 将鼠标悬停在我的多线图表上的使用情况 看起来d3 mouse this 0 on the mousemove函数生成以下错误 无
  • d3.js:非线性图轴

    我正在尝试在轴上添加自定义比例 如下所示 这个想法是 一个刻度总是比前一个刻度大 2 倍 我的理解是 这是一个定制秤 我做了一些研究 但找不到类似的东西 所以我想我的问题实际上是两个问题 这个尺度是数学世界的 标准 吗 这是否可以使用来实现
  • 暂停和恢复过渡

    我在用setInterval 因此转换会在一定时间间隔后发生 是否可以使用 setInterval 暂停和恢复工作 任何正确方向的建议 指示都会非常有帮助 这个问题是在 D3 v3 是最新版本时发布的 5年后D3 v5有了一些新方法 比如s
  • 如何使用 D3 (或只是 javascript)将表单选项设置为“选择”

    有没有一种方法可以搜索选择表单元素中的所有选项 并将具有匹配值的选项指定为 已选择 var xStat G var statOptions Points PTS Goals G Assists A Penalty Minutes PIM c
  • D3.js分组条形图

    I am making a bar chart using D3 js like this source statcan gc ca http www statcan gc ca pub 12 593 x 2007001 figures f
  • 将任何 D3.js 图表与 DC.js 集成

    我试图弄清楚如何轻松地将任何 D3 js 图表与 DC js 库集成 以便在所有图表之间使用交叉过滤功能 我也确实理解以前曾问过这种性质的问题 添加链接以供参考 DC js 监听图表组渲染 https stackoverflow com q
  • 使用 d3 进行多级/分组轴标签

    我想知道是否有一种简单的方法可以在 d3 中添加多级 分层 分组轴标签 例如 如果我有一个折线图 其中 x 轴的月份名称跨越多年 那么我还希望将年份作为月份名称下方的标签 因此它看起来像这样 Oct Nov Dec Jan Feb Mar
  • D3 旭日弧尺寸

    我正在尝试根据以下示例创建 D3 旭日图 https bl ocks org maybelinot 5552606564ef37b5de7e47ed2b7dc099 https bl ocks org maybelinot 55526065

随机推荐

  • “if-then-else”(总是)可以被函数调用替换吗?

    这个问题主要是出于对 PL 如何工作的好奇 实际上我是在查看 SML 时想到的 SML 与 Haskell 的不同之处在于前者使用按值调用 但我的问题是关于 Haskell 的 Haskell 据我了解 具有 按需调用 语义 这是否意味着如
  • 快速的射弹并不总是能击中

    因此 对于我的游戏 有一个快速移动的子弹对象 其精灵大小为 5x5 大约 以大约 30 的速度移动 需要撞击厚度仅为 5 像素左右的相对较薄的 Enemy 物体 子弹以一定的固定距离间隔穿过敌人而不会发生碰撞 I think这是因为子弹移动
  • DataMan iPhone 应用程序如何在后台工作

    AppStore 上的 DataMan 应用程序 DataMan Lite 是该应用程序的免费版本 有助于监控您的数据使用情况 http www iphonelife com blog 2686 monitor your data usag
  • matlab如何求解大型、对称和稀疏线性系统

    也就是说 当我这样做时A b对于非常大 对称且稀疏的 A matlab 使用什么算法 如果矩阵是稀疏且对称正定的 但有very窄带 然后使用专门的带解算器 大多数矩阵没有足够窄的带来触发这种情况 通常 它会在样条工具箱中提供一维样条 二维问
  • 评估 MySQL 中的表达式

    我有一个包含 a b expr 列的表 expr 是其他列的表达式 例如表包含 a b expr 2 5 a b 3 4 a b 3 我喜欢简单地运行一个查询并获得流动的结果 a b expr 2 5 7 3 4 15 我在文档中搜索函数
  • SQL在同一字段中搜索多个值

    我正在构建一个简单的search算法 我想打破我的带空格的字符串 并在其上搜索我的数据库 如下所示 search Sony TV with FullHD support search explode search SELECT name F
  • 仅删除 vb.net 中的一个特定事件处理程序

    我正在编写一个小型 2D 引擎 使用 Lua 来控制它 过去一段时间我一直在 Lua 和 VB net 之间设置事件 我意识到 问题是我似乎无法删除那些搞砸了很多事情的事件 因为它们在应该完成的时候被调用 为了解决这个问题 我想添加某种方法
  • Python - Twisted、代理和修改内容

    所以我研究了一些涉及使用 python 和 Twisted 框架编写 HTTP 代理的事情 本质上 像其他一些问题一样 我希望能够修改将发送回浏览器的数据 也就是说 浏览器请求资源 代理将获取它 在资源返回到浏览器之前 我希望能够修改任何
  • Java 异常访问冲突?

    我目前正在编写一个 JNI 项目 在尝试运行 Java 代码时收到以下错误日志 它告诉我有问题的框架是 jvm dll 框架 在尝试隔离问题时 我试图找出我的问题到底在哪里 在 JVM 与我的本机代码中 我已附加了线程日志的一部分 并且可以
  • 从压缩文件中提取选定扩展名的所有文件[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我是 python 新手 我想从压缩文件中提取三个具有不同扩展名的单个文件 我不知道它们的文件名 只知道它们的扩展名 假设存在以下格式
  • 如何在C#服务中使用剪贴板?

    请记住 我使用的是服务而不是 Windows 窗体应用程序 当我尝试使用 System Windows Forms Clipboard GetText 时我的代码 不要进入下一步 意味着 System Windows Forms 控件已被弃
  • 引用另一个别名的别名

    我需要识别一个引用 Cmder 中另一个别名命令的别名命令 例如 假设我定义了firstAlias 如下所示 alias firstAlias cd blah blah 比我创建另一个使用上面别名的别名 例如 alias secondAli
  • SQL SELECT 每月的第一天和最后一天。

    最亲爱的专业人士 我构建了一个查询来获取当月的第一天和最后一天 但该月第一天的时间戳有问题 declare FirstDOM datetime LastDOM datetime set FirstDOM select dateadd dd
  • Sqlite 获取最大 id 不起作用(?)

    我用这个 SELECT WHERE id MAX id FROM history 但我的查询是空的 我也尝试过这个 这个有效 SELECT MAX id AS max id FROM history 但显然我的查询只包含 max id 键
  • 在java中将美元(大十进制)转换为美分(整数)的最佳方法是什么?

    我必须将我的网络应用程序与支付网关集成 我想输入美元总金额 然后将其转换为美分 因为我的支付网关库接受美分金额 类型Integer 我找到Big Decimal在java中是操纵货币的最佳方式 目前我输入的金额为 50 美元 并将其转换为I
  • SQL Server 和 Java 之间的时间戳差异

    我需要将一个简单的过程从 Java 代码复制到 SQL Server 存储过程 它将进入生产中的 SQL Azure 数据库 但我正在针对本地 SQL Express 12 安装对其进行测试 该存储过程的一部分是将一些值连接成一个字符串 这
  • SSIS 和 MySQL - 表名分隔符问题

    我正在尝试使用 SQL Server 2008 SSIS 将行从 Access 数据库插入 MySQL 数据库 TITLE Microsoft SQL Server Management Studio ERROR 42000 MySQL O
  • 删除重复的文件扩展名

    我有数千个名为 filename gz gz gz gz gz gz gz gz gz gz gz 的文件 我正在使用这样的 find 命令find name gz 找到这些文件并使用 exec或者通过管道连接到 xargs 并使用一些神奇
  • 无法访问 sencha 中整个控制器的全局变量

    我一直在尝试访问一个控制器内的全局值 但无法访问它 我一直在关注这个如何在sencha中定义全局变量 https stackoverflow com questions 18095037 how to define global varia
  • C3.js将折线图Y轴的标签位置更改为Y轴居中

    我需要更改 Y 轴标签在 Y 轴上的位置 当前的六个位置选项无法满足我的场景 我也尝试使用 d3 进行自定义 但仍然没有成功 我创建了一个plnkr http plnkr co edit WzXVForyGJP01WJlAXj5 p pre