程序员经验分享-hwhale

有没有办法用c3js更改标签？

2024-01-11

我正在使用新的c3js http://c3js.org/图书馆。有什么办法可以更改图表中某条数据的标签吗？我有一个条形图，其中每个条形都是一个美元价值。我希望每个条形的标签为 100 美元而不是 100 美元。如果我将值设置为 100 美元，则库无法制作图表。如果不是潜在的价值，有什么办法可以改变标签吗？


您可以指定数据标签和轴刻度的格式。看看下面的例子。

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./css/c3.css">
        <script src="./js/d3.min.js"></script>
        <script src="./js/c3.min.js"></script>
    </head>
    <body>
    <div class='chart'>
    <div id='chart'></div>
    </div>
    <script>
        var chart = c3.generate({
            data: {
                columns: [
                    ['data1', 30, 200, 100, 400, 150, 250],
                    ['data2', 130, 100, 140, 200, 150, 50]
                ],
                type: 'bar',
                labels: {
                    format: {
                        y: d3.format("$,")
                        //y: function (v, id) { return "Custom Format: " + id; }
                    }
                }
            },
            axis : {
                y : {
                    tick: {
                        format: d3.format("$,")
                        //format: function (d) { return "Custom Format: " + d; }
                    }
                }
            }
        });
    </script>
    </body>
</html>

生成的图表如下所示。 https://i.stack.imgur.com/Vt4No.png

查看d3.js 中的格式化选项 https://github.com/mbostock/d3/wiki/Formatting#d3_format或者您可以编写自己的函数（请参阅上面注释掉的代码）。

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

d3js

c3js

有没有办法用c3js更改标签？ 的相关文章

  • 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

  • 如何在没有 DOM 的情况下将 javascript 作为 node.js 脚本运行？

    https github com jasondavies d3 cloud https github com jasondavies d3 cloud是一个使用 D3 库的 javascript 文字云 这是一个交互式演示 http www

  • 在 D3 中在外部加载的 svg 图形上绘图

    我已经从 svg 文件加载了外部图形 我想尝试在其上绘图 但不知道如何操作 我的简单 d3 代码在这里

  • 分配函数后如何删除 onmouseout 事件？

    我有一个问题 我正在为 onmouseout 事件分配一个函数 但运行该事件后 我需要将其删除 将非常感谢您的帮助 这取决于你的代码 如果你用 d3 这样做 那么你可以说 在 onmouseout 事件函数中 element on mous

  • d3.js：修改树布局中的链接

    抱歉我的英语不好 我在这里使用这个例子 http bl ocks org mbostock 4339083 http bl ocks org mbostock 4339083构建树形图 但我用矩形更改了根的子级中的圆圈 现在该图有点混乱 因

  • 在 d3.js 中操纵鼠标悬停在“点击区域”

    我想show and hideSVG 中的一个节点 当鼠标移到 mouseout 问题是我的节点内部的形状是一条宽度只有1 5px的路径 因此在鼠标悬停事件中不容易击中该区域 这对用户体验肯定不方便 我想知道是否有办法做到这一点打击范围更广

  • 未捕获的类型错误：无法读取未定义的属性“albersUsa”

    以前可能有人问过这个问题 但我希望我能得到针对我遇到的问题的答案 我是 d3 的新手 我现在正在尝试绘制一个纬度 经度 当我成功完成第一个纬度 经度时 我将完成其余的工作 感谢专家的任何帮助 谢谢 尝试在特定区域绘制蜂窝基站 这是代码

  • d3.js比例符号图：根据数据值设置圆的半径

    我正在遵循这个关于如何使用 d3 js 和 mapbox 制作地图的精彩示例 https franksh com posts d3 mapboxgl https franksh com posts d3 mapboxgl 它工作得很好 除了

  • 使 D3 响应式：viewBox 与 resize()？

    我必须构建在平板电脑 桌面显示器以及某些情况下非常大的 4k 高分辨率影院尺寸显示器上都能正常运行的 d3 可视化效果 因此 我试图找出使用 SVG 的 viewBox 属性和 preserveaspectratio 与调用调整大小函数以在

  • 根据子节点数量动态调整 d3 树布局的大小

    从这个例子来看http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk 20111018 tree html我已经建立了一个d3

  • D3 js 链接在节点下面

    我创建了图形对象 稍后可以使用更多节点和链接来扩展图形对象 第一个创作看起来不错 然后 与add函数我添加了节点 4 和链接 as you can see above the link of between node 4 and 3 is

  • 如何进行多个 d3 窗口大小调整事件

    我有三个svg一页上的元素 每个元素都由 D3 陪伴 每个都有自己的页面调整大小逻辑 由我写的简单模块 https github com TimeMagazine d3 base让他们做出反应 问题在于 只有最后一个调整大小事件被触发 因为

  • 如何使用 d3.format 获取可本地化或可定制的 si 代码

    使用 SI 代码绘制图表正是我们想要的 我们的 y 轴值往往是较大的货币值 例如 10 411 504 201 20 缩写这个 至少在美国语言环境中 这应该转换为 10 4B 但是使用 d3 format 的 s 类型表示 SI 代码 这将

  • Javascript 将对象推送为克隆

    我将 d3 用于交互式网络应用程序 我需要绑定的数据在交互过程中发生变化 并且由 JSON 变量中的一些选定对象组成 为此 我在 JSON 变量上使用了映射 并进行了一些查询来选择适当的对象 对象被推送到列表中 并且该列表被绑定为新数据 我

  • 如何精确缩放已翻译的d3地图

    我有一张已翻译的地图 以使其正确适合画布 我正在尝试实现一种缩放它的方法 它确实有效 但是当您放大时它会远离中心 而不是以鼠标甚至画布为中心 这是我的代码 function map data total views var xy d3 ge

  • 快速响应的交互式图表/图形：SVG、Canvas 还是其他？

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl

  • D3 强制布局，较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个

  • d3js 折线图——如何将最后一步延伸到范围末尾？

    很简单 但我无法摆脱这个问题 线是两点 值 之间的链接 从值 A 绘制到值 B 因此 假设 A 的值为 10 B 的值为 20 而 C 缺失 现在从 0 到 10 到 20 的线已经绘制完毕 我想画从 0 到 10 到 20 到 25 的线

  • d3 树 - 有相同孩子的父母

    我一直在将代码从 JIT 转换为 D3 并使用树布局 我已经复制了代码http mbostock github com d3 talk 20111018 tree html http mbostock github com d3 talk

  • 动画 D3 地球仪 (d3.geo.azimuthal)

    我对 d3 javascript 库有疑问 我想使用方位角 http mbostock github com d3 talk 20111018 azimuthal html地球 我想从地球上的经度和纬度坐标插入点 并使地球动画化 而无需使用

随机推荐

  • ActiveRecord 使用 JSON 而不是 YAML 进行序列化

    我有一个使用序列化列的模型 class Form lt ActiveRecord Base serialize options Hash end 有没有办法让序列化使用 JSON 而不是 YAML 在 Rails 3 1 中你可以 clas

  • 每次基于 Selenium 的自动化测试后我应该退出浏览器吗？

    我试图使我的 selenium 测试尽可能原子且相互独立 因此我决定退出浏览器并在每次测试运行后创建一个新的 Webdriver 实例 这种方法对我来说更有意义 并且通过讨论这个问题的多个线程得到了强化 e G 这是对相关问题的回答 htt

  • 没有entityClass，并且由于entityClassSet中有多个，所以无法自动推导

    我正在尝试实现具有多个实体类的解决方案 但它失败并显示以下错误消息 没有配置entityClass null 并且因为有多个 EntityClassSet 类 com myspace wla JobA 类 com myspace wla J

  • 如何将我的 csv 文件转换为这个 scikit learn 数据集

    抱歉 如果我在这里没有使用正确的术语 我有一个包含我自己数据的 csv 文件 我首先需要将其转换为另一个format http scikit learn org stable modules generated sklearn datase

  • 如何在 LinearLayoutManager - RecyclerView 中重叠项目（如堆叠卡片）

    是否可以重叠 RecyclerView 中的项目 我正在尝试使用 LinearLayoutManager 我的要求与 LinearLayoutManager 中的相同 我只需要从上到下重叠内部的项目 如堆叠卡片 我见过一些变体 https

  • 了解 Spring 上下文初始化顺序

    我有一组复杂的 bean 以及它们之间的依赖关系 所有豆子都是 Service Repository or Controller带注释 我使用 PostConstruct注解 虽然存在一些循环依赖 但系统仍然由 Spring 正确初始化 然

  • Laravel 多个工人运行两次工作

    我使用 Laravel 5 6 将作业分派到队列 然后使用主管激活该队列上的 8 个工作线程 我原以为 Laravel 会知道不要运行同一个工作两次 但我惊讶地发现它确实如此 同样的工作由不止一名工人负责 因此奇怪的事情开始发生 问题是 一

  • 是否可以从托管 C++/CLI 项目正常运行非托管 C++？

    我正在将一个纯非托管 VC 9 项目包装在 C CLI 中 以便从 NET 应用程序中简单地使用它 我知道怎么写wrappers https stackoverflow com questions 15505992 can you use

  • FFImageLoading：如何添加身份验证？

    我正在尝试使用FF图像加载 https github com luberda molinet FFImageLoading wiki在我的 Xamarin iOS 和 Xamarin Android 应用程序中从 url 加载图像 所有网址

  • & 导致返回的文本在 URL 中被截断

    我从之前维护代码的人那里继承了几个php脚本 他没有编程经验 主要是尽其所能地将东西组合在一起 今天我不得不重写一个WordPress的插件文件 现在我不知道出了什么问题 我面临的问题是 当在属于表的 else 语句中显示返回的文件名时 我

  • 为什么子文件夹没有部署到 Google App Engine Nodejs 应用程序

    我正在开发 NodeJS Web 应用程序并尝试在 Google 云中运行它 仅根文件夹中的文件会使用以下命令部署到 Google App Enginegcloud app deploy命令 appengine express 示例应用程序

  • 解析错误：语法错误，意外的 T_ELSE，我不知道为什么

    这是我的 php 代码 h3 class info Upcoming Games h3 h3 class info Athletic Events h3 为什么我会收到此错误 我已经有了我需要的所有括号 不是吗 The and else 不

  • 如何在 iOS 11 中禁用“保存到文件”？

    我有一个 iOS 应用程序 它创建 PDF 并使用 UIActivityViewController 使用默认共享功能进行共享 我不得不阻止一些共享设施 如 Vimeo Facebook Twillio 等 并且文件不应存储在设备上 在新的

  • 带圆形窗口的局部最大值

    我正在尝试使用圆形内核计算矩阵上的局部最大值滤波器 输出应该是局部最大值的单元格 对于输入 数据 中的每个像素 我需要通过圆形窗口查看它是否是局部最大值 从而返回值 1 否则返回 0 我有这段代码 基于这里的答案 如何将圆盘形掩码应用于 n

  • JSP、MySQL 和 UTF-8

    我正在思考 通过表单输入的国际字符没有完全按照输入的方式存储 并且存储的数据也没有按照存储在数据库中的方式返回 如果我输入 anak mlek patlad 并单击表单上的 保存 我使用的页面会显示 anak mlek patlad 但数据

  • xunit 添加信息到输出

    有谁知道如何在运行 xUnit 测试时向输出控制台添加附加信息 我正在使用 testdriven net 但我不认为这就是我的答案所在 我正在使用一个IUseFixture 实际上IClassFixture从 2 0 开始 在测试之间维护数

  • ServiceStack：如何处理错误？

    到目前为止 我使用 ServiceStack 取得了很好的效果 只是处理错误似乎很棘手 如果在消息序列化期间出现问题 例如 因为我忘记向消息添加默认构造函数 则客户端返回的所有消息都是服务器有内部错误且状态代码为 500 的消息 这Http

  • gwt 从 jsni 方法返回了除 int 之外的其他内容

    从今天开始 我收到了一条与昨天相同的代码的错误消息 但我没有进行任何更改 我收到此错误消息 警告 perchsearch 从 JSNI 方法 com google gwt dom client DOMImplStandardBase Cli

  • 无法使用 vue.js 调用 v-show 和 @click 同一按钮

    我正在尝试根据数据变量在按钮上显示文本并调用 vue js axios 方法的函数 我能够根据数据变量在按钮上显示文本 但无法调用 axios post 方法 我收到以下错误 当我点击按钮时 url http localhost 8085

  • 有没有办法用c3js更改标签？

    我正在使用新的c3js http c3js org 图书馆 有什么办法可以更改图表中某条数据的标签吗 我有一个条形图 其中每个条形都是一个美元价值 我希望每个条形的标签为 100 美元而不是 100 美元 如果我将值设置为 100 美元 则

热门标签