Ajax JSON 转为 Highcharts 饼图

2024-03-13

在过去的几天里,我在外部文件中的一些示例 json 数据中使用 ajax 来使用 Highcharts 库填充饼图时遇到了问题。

这是文件中的示例 JSON 数据:data.json

   [
     ["Apples", 43.0],
     ["Pears", 57.0]
   ]

这是我的 highcharts 实现和 AJAX 调用: (无关的代码我省略了)

<script type="text/javascript">
     $(function() {
       var options = {
            chart: {
                renderTo: 'Chart',
                defaultSeriesType: 'pie'
            },
            title: {
               text:'Fruits'
             },

            plotOptions: {
                 pie: {
                     allowPointSelect: true,
                     cursor: 'pointer',
                     dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',

                     }
                 }
            },
            series: [{
               type: 'pie',
               name: 'Fruits',
               data: []
            }]
         };

        $.getJSON('data.json', function(json) {

           options.series.push(json);               
           var chart = new Highcharts.Chart(options);
         }).error(function() {console.log('error');});


     });
</script>

基本上,我想将 JSON 传递到 options.series[].data[] 中。当继续进行时

options.series.push(json);

I get:

[Object, Array[2]] // where the Object contains .name and .type and the Array[2] is my data

我很确定我需要这个:

[Object] // which contains .data , .name, .type

我实际上能够通过像这样构造 JSON 来解决我的问题:

[
     {
          "type" : "pie",
          "name" : "Fruits",
          "data" : [
               [
                    "Apple",
                     43.0
               ],
               [  
                    "Pear",
                    "57.0"
               ]
           ]
     }
]

而不是进行数组推送,

我将系列参数设置为 JSON,如下所示:

 $.getJSON("data.json", function(json)) {
    options.series = json;
    var chart = new Highcharts.chart(options);
 }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Ajax JSON 转为 Highcharts 饼图 的相关文章

  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map
  • XHR 调用是宏任务还是微任务?

    Ajax 调用被安排为微任务还是宏任务 浏览器之间有什么区别吗 在 JavaScript Ninja 的秘密 第二版一书中 作者指出网络事件被安排为宏任务 因此 XHR 回调与宏任务一起排队
  • 如何自动检索AJAX调用的URL?

    目的是对爬行蜘蛛进行编程 使其能够 1 检索此页面表格中链接的 URL http cordis europa eu fp7 security projects en html http cordis europa eu fp7 securi
  • 如何使用复杂对象或json在ng-table中添加动态列?

    我有以下 ng table 代码 参见笨蛋 http plnkr co edit oTxkmtAwt22gtO2JDPg4 p preview var app angular module main ngTable controller D
  • 使用 Gson 序列化时如何公开类名

    我的场景非常复杂 但总结如下 我试图了解编译器的源代码 并了解每个 AST 节点代表什么 我正在生成不同程序的 AST 的 JSON 序列化 然后检查可视化的 JSON 输出 它工作得很好 除了一个问题是在 Gson 中生成的 JSON 数
  • Swift 4 使用随机密钥解码嵌套 JSON [重复]

    这个问题在这里已经有答案了 我是 Swift 4 的新手 正在尝试从 Wikipedia API 解码此 JSON 我正在努力定义一个结构 因为我发现的所有示例 教程都仅嵌套 1 2 层深度 除此之外 当其中一个密钥是随机的时 如何解码数据
  • 如何使用基于 Spring MVC 注解的 Portlet 控制器通过 AJAX 呈现 JSON 视图/响应?

    在过去的六个小时里 我在 Google 和 stackoverflow 上搜索了这个问题的答案 我最初是一名 PHP 开发人员 所以请耐心等待 从 PHP 控制器返回 JSON 数组非常简单 我正在使用 Spring MVC 3 0 我只想
  • 表单未使用 AJAX 提交

    再次更新 如果有人关心的话 我之前发布的解决方案由于某种原因停止工作 我在 ajax 请求中包含了 beforeSend 并将验证表单的 js 部分粘贴到其中 现在就像一个魅力 form on submit function e e pre
  • Scala 2.10,它对 JSON 库和案例类验证/创建的影响

    显然 在 Scala 2 10 中我们得到了改进的反射 这将如何影响 lift json jerkson sjson 和朋友 此外 我们能否期望在不久的将来 Scala 中会出现内置的 JSON 语言功能 如 Groovy 的出色 GSON
  • 如何修复 AJAX 在选中复选框时始终触发?

    有时这个 AJAX 会触发 有时不会 让我解释一下 habit js document ready function habit check change function habit this parent siblings habit
  • 作为数据流写入 div

    考虑写入 div 的 AJAX 调用 recent req post result php d data function returnData content html returnData PHP 脚本位于result php执行一些需
  • 我想使用 Sequelize 将 MySQL 中的对象数组存储在单个列中

    之前我正在寻找如何使用 Sequelize 在 MySQL 中插入对象数组 然后我找到了一种直接插入数组的解决方案 例如 1 2 在单列中 insert into TABLE NAME id marks VALUES 21 1 2 但我正在
  • AJAX Rails 验证

    我的表单和验证可以很好地处理常规的 http 请求 我希望它使用 AJAX 我知道我可以在客户端进行验证 但这似乎是多余的 因为我已经在模型中定义了验证 当用户填写表单时 我想就他们的条目向他们提供反馈 在 AJAX 表单中使用 Rails
  • 使用Sed查找并替换json字段

    我有一组 json 文件 其中在最后一个键值对之后有需要替换的逗号 RepetitionTime 0 72 TaskName WM Manufacturer Siemens ManufacturerModelName Skyra Magne
  • MySQL JSON 存储与两个表

    与使用单独的元表相比 使用 JSON 在表中存储数据有什么好处吗 这是原始架构 Users Table UserId Username Etc 5 John Avatar Table Id UserId ImageName ImageTyp
  • Javascript/jQuery 变量未给出预期值

    和我之前的其他人一样 我也在 Javascript 的范围内苦苦挣扎 那并试图阅读该死的东西 我已经检查了关于这个问题的一些先前的线程 但我似乎无法让它们正确地应用于我的问题 在下面的示例中 我想操纵中的值tagsArr数组 一旦数组已完全
  • 杰克逊.将缺失的属性反序列化为空Optional

    假设我有一堂这样的课 public static class Test private Optional
  • json_decode 返回 null 并带有不同的引号

    json decode foo bar true 这有效 但是这个返回NULL json decode foo bar true The json last error 输出4 JSON ERROR SYNTAX 我检查了以下问题的一些答案
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • jquery 中 DOM 元素的手动垃圾回收是否可以提高浏览器性能?

    在性能范围内 删除不再需要的元素是否有意义 或者浏览器是否对代码中未进一步引用的 dom 元素执行自动垃圾收集 some element fadeOut 1000 function el el remove lt does this mak

随机推荐