使用 c3 js 从 json 绘制饼图

2024-01-13

以代码为例..

我需要生成一个有 4 个分区(site1、site2...)的饼图,每个分区对应于其各自的上传值。

在上面的代码中我无法实现这一点(我已指定值:['upload'])...

我必须指定的确切值是多少?

Thanks..

  chart = c3.generate({
            data: {
                json: [
                    {name: 'www.site1.com', upload: 200},
                    {name: 'www.site2.com', upload: 100},
                    {name: 'www.site3.com', upload: 300},
                    {name: 'www.site4.com', upload: 400},
                ],
                keys: {
    //                x: 'name', // it's possible to specify 'x' when category axis
                    value: ['upload'],
                },
                type:'pie'
            },
            axis: {
                x: {
    //                type: 'category'
                }
            }
        });

饼图将每个属性映射到饼图扇区。你可以像这样重新格式化你的 JSON

var jsonData = [
    {name: 'www.site1.com', upload: 200},
    {name: 'www.site2.com', upload: 100},
    {name: 'www.site3.com', upload: 300},
    {name: 'www.site4.com', upload: 400}
]

var data = {};
var sites = [];
jsonData.forEach(function(e) {
    sites.push(e.name);
    data[e.name] = e.upload;
})    

chart = c3.generate({
    data: {
        json: [ data ],
        keys: {
            value: sites,
        },
        type:'pie'
    },
});

工作小提琴 -http://jsfiddle.net/2nf9a7x4/ http://jsfiddle.net/2nf9a7x4/

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

使用 c3 js 从 json 绘制饼图 的相关文章

  • 将 XML 数据(键/值对)加载到数据结构中

    我有一个 XML 数据源 其中包含键 值对列表 我正在寻找一种简单的方法将相同的数据加载到数组或其他一些数据结构中 以便我可以轻松查找数据 我可以通过几次点击将其绑定到 GridView 但我无法找到一种直接的方法将其加载到非 UI 控件中
  • 如何防止Maven访问远程仓库?

    我怎样才能强制Maven仅使用我的本地存储库和 Intranet 上的单个特定存储库并且不从互联网下载任何东西 即使我的 POM 都指定了单个公司的内部存储库 maven 也会从 libs 的 POM 文件中访问互联网存储库来获取依赖项 在
  • WPF 中的编号列表

    我正在尝试在基于 WPF 的 UI 中创建一个编号列表 带有子列表 我知道BulletDecorator用于创建项目符号列表 我希望编号列表可能有类似的东西 我希望能够实现类似的目标 项目清单 项目清单 a 子列表项 b 子列表项 项目清单
  • 最大会话 1 不适用于 Spring Boot

    我想在我使用 spring boot 和基于 java 的配置的应用程序中仅限制单个用户的一个最大会话 我使用了 spring max session 1 但它对我不起作用 这是我基于java的spring配置文件 package com
  • PHP 错误未显示在浏览器中 [Ubuntu 10.10]

    我对 PHP 和整个 LAMP 堆栈很陌生 但我已经设法在我的 Ubuntu 10 10 系统上启动并运行它 除了在浏览器中重新发布错误之外 一切似乎都正常工作 我似乎无法正常工作 没有它我就无法工作 我读过许多文章和其他线程 它们表明应在
  • 如何使用 Java 中的参数运行 VBS 函数并将结果分配给变量

    我有这个Excel宏 Function Calculate Something StartDate As Date EndDate As Date As Double some math is here not important Calc
  • 从代码中调用单击命令

    我有一个使用以下命令包装为命令的函数click http click pocoo org 5 所以它看起来像这样 click command click option w width type int help Some helping m
  • Docker 使用不同的参数运行镜像的多个实例

    我是码头工人的新手 所以这听起来可能是一个有点基本的问题 我有一个 VS Net core2 控制台应用程序 它能够接受一些命令行参数并提供不同的服务 所以在正常的命令提示符下我可以运行类似的命令 c gt dotnet myapplica
  • 如何获得 LinkedIn r_fullprofile 访问权限?

    我目前正在开发与 LinkedIn 集成的自定义应用程序 特定于公司 我已收到具有基本个人资料访问权限的数据 可以获取并填写我的应用程序中的某些字段 现在我需要完整的个人资料权限 但正如回答中这个问题 https stackoverflow
  • 如何迭代字符串并检查每个字符的字节值?

    我有代码 cell val CStr Nz fld value Dim iter As Long For iter 0 To Len cell val 1 Step 1 If Asc Mid cell val iter 1 gt 127 T
  • RxJS Observables 是否只能由一个订阅者处理?

    我试图了解 Observables 和 RxJS 是如何工作的 所以这可能根本不是如何使用它们的重点 我有一个 Angular2 应用程序 并且还使用 RxJS Observables 来发送事件 现在 对于特殊类型的错误事件 我想知道该事
  • 在 Swift 中将可选字符串转换为 int

    我在将可选字符串转换为 int 时遇到麻烦 println str VAR str VAR println str VAR toInt 结果是 str VAR Optional 100 nil 我希望它是 str VAR Optional
  • 动态列表视图内的翻转视图不可滑动

    我有一个在运行时从网络服务填充的列表视图 在列表视图的数据模板中 我制作了翻转视图 每个翻转视图都会获得用户可以滑动的三个图像 我附上了我正在寻找的图片 ISSUE Flipview 无法进行用户交互 这是下面的xaml
  • FastApi与其他Api通信

    我最近正在使用 fastapi 作为练习 我想将我的 fastapi api 与其他服务器上的验证服务连接 但我不知道如何做到这一点 我还没有在官方文档中找到对我有帮助的东西 我必须用python代码来做吗 或者有什么办法吗 FastApi
  • Java 语句,处理优先级(“悬空 else”)

    给出以下有效代码 Boolean a false if a System out println A else System out println A 根据文档 https docs oracle com javase tutorial
  • 列表索引更改多个元素

    我找不到任何与我的问题相匹配的内容 所以希望这还没有在某处提到过 我太愚蠢了 找不到它 thelist a 0 for i in range 5 thelist append a print thelist 此时程序返回 0 0 0 0 0
  • Django MEDIA_URL 和 MEDIA_ROOT

    我正在尝试通过 Django 管理上传图像 然后在前端页面或仅通过 URL 查看该图像 请注意 这一切都在我的本地计算机上 我的设置如下 MEDIA ROOT home dan mysite media MEDIA URL media 我已

随机推荐

  • 在 DataGridView 中隐藏行,绑定在我的项目中不起作用

    我面临一个有关项目中 DataGridView 行隐藏的问题 我粘贴的代码适用于单独的测试项目 但不适用于我的项目 请帮我解决这个问题 我正在测试的代码 public partial class frmTestGirdBinding For
  • 将行为附加到 Silverlight 中的所有文本框

    是否可以将行为附加到 Silverlight 应用程序中的所有文本框 我需要向所有文本框添加简单的功能 选择焦点事件上的所有文本 void Target GotFocus object sender System Windows Route
  • 在 Python 2 中编码转义字符而不杀死 Unicode 的正确方法是什么?

    我想我对 Python 的 unicode 字符串很着迷 我正在尝试对 Unicode 字符串中的转义字符进行编码without转义实际的 Unicode 字符 我得到这个 In 14 a u Example n In 15 b u n I
  • JQuery选择包含行中td内特定文本的所有行

    我有一个表 我试图选择其中包含文本 Test 的 td 的所有行 然后在所有匹配的行上隐藏带有 ms vb icon 类的 td 我最初有下面的代码 但这只隐藏了最后一个匹配行上的类 td contains test last parent
  • 在 Rails 中放置用户定义的类的位置

    我正在尝试使用这个类 http robbyonrails com articles 2005 05 11 parsing a rss feed http robbyonrails com articles 2005 05 11 parsin
  • 使用 restart=always 停止失败的容器

    我想停止一个无法重新启动的容器 它的状态是Restarting 该容器有restart always Doing docker stop
  • 使用本机脚本转换器

    我现在正在尝试使用 javascript 来连接 NativeScript 并有一个非常基本的问题 let costFormatter toView value console log Got value return value toMo
  • Delphi Indy 以西里尔文发送 POST 数据

    我想使用 indy 10 通过 delphi 发送西里尔文帖子数据 好吧 我知道如何发送数据 但是当我发送书面或西里尔文的内容时 发布数据响应带有一些编码符号 这是我的代码 http TIDHttp Create nil http Hand
  • 1900 年以来的日子

    我正在使用来自的数据Excel2007解析为PHPExcel http phpexcel codeplex com 日期显示为 1900 年以来的天数 我怎样才能转换为字符串YYYY MM DD 或类似的东西 像这样的事情 应该可以解决问题
  • 创建 BitBucket git 提交钩子?

    我刚刚将一个存储库从 GitHub 移植到 BitBucket 尽管它满足了许多要求 但我发现找到创建 git commit hook 的文档非常困难 最初 我在 CentOS 服务器上有一个由 GitHub 挂钩触发的 ruby 应用程序
  • React-native run-android 花费太多时间

    我在 Windows 上使用 React Native 已有 2 周了 但现在 在我的设备上运行我的应用程序需要太多时间 Scanning 835 folders for symlinks in D workspace react nati
  • Webgl 跨源图像不起作用

    我在跨源图像方面遇到了一些问题 希望您能提供帮助 这里是行为 我有 2 个域 例如 域名1 com 域名2 com 在domain1上我放了很多html5游戏 该域只是游戏的存储库 Domain2是真正的网站 wordpress网站 用户可
  • Celery 收到类型的未注册任务(运行示例)

    我正在尝试跑步example http ask github com celery getting started first steps with celery html id3来自芹菜文档 I run celeryd loglevel
  • Scanner vs. StringTokenizer vs. String.Split

    我刚刚了解了 Java 的 Scanner 类 现在我想知道它如何与 StringTokenizer 和 String Split 进行比较 竞争 我知道 StringTokenizer 和 String Split 只适用于字符串 那么为
  • 使用 Javascript 的无层 Web 框架?

    Links http links lang org是一种类似 Lisp 的函数式 Web 编程语言 框架 可以轻松编写一段代码 并将其编译为服务器端代码 客户端 JS 和 HTML 从而使编写 Web 应用程序变得更加容易 由于客户端和服务
  • Bootstrap Glyphicons 是如何工作的?

    我了解 CSS 和 HTML 的一些基础知识 有时会使用它们 但我不是专业人士 而且我很好奇 Bootstrap Glyphicons 的工作原理 我的意思是 Bootstrap zip 文件中没有图像 那么图像从哪里来呢 在 Bootst
  • 以实例变量和参数为键的 Spring 缓存

    我正在使用 ehcache 来缓存方法结果 键必须是成员对象和方法参数的组合 我的课程看起来像这样 Class A private B b Cacheable value someCache key some key based on B
  • console.log() 在控制台以外的对象上调用

    我记得总是当我想要通过时console log作为某个函数的回调参数 除非我使用bind 绑定方法console to it 例如 const callWithTest callback gt callback test callWithT
  • 使用 gradle 在 intellij 中从 JUnit 4 升级到 JUnit 5

    我想将我的 Gradle 项目测试从 JUnit 4 转换为 JUnit 5 由于有很多测试 我不想同时转换它们 我尝试配置我的build gradle像这样 apply plugin java compileTestJava source
  • 使用 c3 js 从 json 绘制饼图

    以代码为例 我需要生成一个有 4 个分区 site1 site2 的饼图 每个分区对应于其各自的上传值 在上面的代码中我无法实现这一点 我已指定值 upload 我必须指定的确切值是多少 Thanks chart c3 generate d