javascript - 带有融合图的响应式饼图-6ren

javascript - 带有融合图的响应式饼图

转载作者：搜寻专家更新时间：2023-10-31 20:40:06

25

4

我想让我的 fusionchart 饼图响应迅速，所以我遵循这里的一些指南: http://docs.fusioncharts.com/charts/contents/FirstChart/ChangeSize.html我按照“图表的动态调整大小功能”部分中的说明进行操作。

但是当页面加载时，我的图表变平了(没有高度)。 my chart flatten

当我调整浏览器大小时，图表大小响应成功，但我得到一个非常小的饼图 very small pie

为什么我的图表在页面首次加载时变平了？ (我必须先调整浏览器大小才能看到图表)。为什么我得到一个非常小的图表？

这是我的代码

<body style="height:100%;">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div id="chartContainer" style="height:100%;">
                FusionCharts XT will load here!
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    FusionCharts.ready(function(){
        var myChart = new FusionCharts({
            "type": "pie2d",
            "dataFormat": "jsonurl",
            "dataSource": "pie.json",
            "width": "100%",
            "height": "100%"
        });
        myChart.render("chartContainer");
    });
</script>

这是我的 pie.json :

{
"chart":{
    "caption":"Rasio Pendapatan Aeronautika & Non-Aeronautika",
    "subCaption":"Januari-Juni 2014",
    "paletteColors":"#008ee4,#6baa01,#f8bd19,#e44a00,#33bdda",
    "bgAlpha":"0",
    "borderAlpha":"20",
    "use3DLighting":"0",
    "showShadow":"0",
    "enableSmartLabels":"0",
    "startingAngle":"0",
    "showPercentValues":"1",
    "showPercentInTooltip":"0",
    "decimals":"3"},
    "data":
    [
            {
                "label":"Non-Aeronautika",
                "value":"534.973.345.227\r",
                "link":"newchart-jsonurl-naero.json"
            },
            {
                "label":"Aeronautika",
                "value":"960.429.586.179\r",
                "link":"newchart-jsonurl-aero.json"
            }
    ]

你能指出我的错误吗？

感谢您的关注，我们将不胜感激..

最佳答案

使用 AngularJS 和 Bootstrap。

在我的 HTML 中，我将 width="300"更改为 width="100%"这使我的圆环图响应迅速:

HTML:

<div class="row" data-ng-controller="VariableInvestmentSummaryCtrl">
    <div class="col-md-4">
        <div fusioncharts
            width="100%"
            height="300"
            type="doughnut2d"
            dataSource="{{myDataSource}}" >
        </div>
    </div>
    <div class="col-md-8 datagrid-wrapper investments"></div>
</div>

JSON:

$scope.myDataSource = {
        'chart': {
            'numberPrefix': '%',
            'theme': 'fint',
            'bgColor': '#DDDDDD',
            'bgAlpha': '0'
        },
        'data':[{
            'showLabel': '0',
            'label': 'Some Name',
            'showValue': '0',
            'value': '25'
        },
        {   
            'showLabel': '0',
            'label': 'Garden Groove harbour',
            'showValue': '0',
            'value': '50'
        },
        {   
            'showLabel': '0',
            'label': 'Los Angeles Topanga',
            'showValue': '0',
            'value': '10'
        },
        {   
            'showLabel': '0',
            'label': 'Compton-Rancho Dom',
            'showValue': '0',
            'value': '10'
        },
        {   
            'showLabel': '0',
            'label': 'Daly City Serramonte',
            'showValue': '0',
            'value': '5',
            'color': '#FE0000'
        }]
    };

关于javascript - 带有融合图的响应式饼图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24422016/

25

4

0

文章推荐： PHP fopen 和file_get_contents 限制了下载速度，为什么？

文章推荐： php - 用户 session 和显示用户信息

文章推荐： php - 如何在 PHP 的指定时区获取当天的午夜？

文章推荐： php - 从 nginx 向 auth_request 模块传递参数

c++ - 融合::vector + 融合::push_back = 融合::vector ？
我输入了一个包含两个元素的 vector 。然后我将另一个元素 push_back 到它，并期望什么结果类型也是一个 vector 。但事实并非如此。例子: typedef boost::fusio
svn - 颠覆、融合
首先让我先说，我以前在这里问过类似的问题，但从来没有得到解决我缺乏知识/问题的好答案。首先，让我从一个分支策略提案开始。这就是我们的工作，我很高兴听到其他评论，以及为什么这很糟糕。但要明白它通常对我
javascript - 字符串的第一个字符与 % 融合
所以我将一个带有 javascript 的字符串发送到 php 页面: if(cp.value!=''){ s+=cp.name +" LIKE '%"+ cp.value +"%'";
R - which 和 which.max 融合
我有一个简单的问题，我该如何使用 which和 which.max同时。我想选择最大值epnum为行 id == B13639J2 . 我需要检索 row number因为我需要对变量进行一些手动更
groovy - 文件上传与 Groovy 融合？
我想将带有 Groovy 脚本的文件上传到 Confluence。 As this Pythonscript example!我开始将代码翻译成 groovy， // Groovy def serve
c++ - 融合 vector 投影
我有一个融合 vector ，其元素具有多个不同类型的成员数据，我想创建一个新的融合 vector ，它将仅投影特定的数据成员。我已经对此进行了一段时间的研究，但没有任何进展。 #include #
python - 如何创建一个新页面以与 Python 融合
我正在尝试使用 Python 的 xmlrpclib 创建一个新的页面以汇合。我已经知道如何更新现有页面的内容，但如何创建一个全新的页面？我使用了以下脚本来更新内容: import xmlrpcli
vmware-fusion - Pow 和 VMware 融合
我正在使用 Pow 在 Mac OS X 上为 Rack 应用程序提供服务。http://myapp.dev正确显示应用程序。在同一台机器上，我使用 VMware Fusion 运行 Windows
cassandra - Apache Cassandra 如何与 Infinispan 融合？
我检查了 Cassandra 和 Infinispan 的主要特性。它们似乎具有并提供非常相似的特性和功能: NoSQL 数据存储坚持去中心化支持复制可扩展性容错 MapReduce 支持
search - Drupal 7搜索API，Elasticsearch连接器，聚合/融合
我在Drupal 7网站中使用Search API和Elasticsearch Connector。我已经在AWS中托管了elasticsearch。搜索完美无误。但是我想像在Drupal.org搜索
python - 融合 API 和 CMake 构建
我最近重新打开了几年前参与的一个项目。我写了一个小的 python 脚本来构建项目。我想将其移植到 CMake。我遇到的问题是脚本使用了 pkg-config在 linux 上找到 fuse 头文件
node.js - Yelp 融合 : Cannot get Tokens
我正在尝试访问 Yelp fusion API。我正在关注documentation并来到这段代码: const request = require('request'); // As you can
Ubuntu 融合 : No GSettings schemas are installed on the system
这是一个 vanilla Ubuntu 16.04 LTS，准确地说是基于 Xubuntu core。所以我需要自己安装包。除了 meld 之外，一切都很顺利，开始时，我会得到: (meld:4188
Java 流惰性 vs 融合 vs 短路
我正在尝试对惰性求值在 Java 流 API 中的应用形成一个简洁而连贯的理解。这是我目前的理解: 元素仅在需要时才被消耗，即流是惰性的，中间操作也是惰性的，例如过滤器，仅在需要时进行过滤。中间操
apache-kafka - 如何将没有模式的数据发送到 kafka - 融合 jdbc - 接收器使用？
我使用 conluent jdbc-sink 将数据从 kafka 加载到 oracle。但是我用数据编写了关于值(value)的模式。我不想用数据编写模式，如何在 kafka 主题上编写模式，然
matlab - 2D 融合 Lasso 与 Matlab CVX
我在这里编写了一个 2D 融合套索代码。 [m n] = size(circle); cvx_begin variable theta(m, n); minimize( norm(ci
C++ D3D9 Alpha 与 Creators Update 融合
目前我正在开发一个使用 dx9 创建叠加层的应用程序。现在我遇到了一个问题，自从我将 Windows 10 升级到最新版本(Creators Update)后，它无法使用 alpha channel
c# - Task.Delay 与 Task.Yield 融合？
我正在尝试编写类似 fiber 的代码，这样我就可以进入任务并从中退出。我试过的代码: class TaskActivity { CancellationTokenSource _m=new
javascript - 将 JavaScript NPM 项目与 Spring Boot 融合
我使用 NPM 在 React.js 中创建了一个前端。作为 IDE，我在这里使用 IntelliJ IDEA。该项目将使用我单独创建的 Spring Boot 编写的后端，也在 IntelliJ I
cassandra - 融合 3.3 升级后 Kafka-cassandra 连接器失败
Cassandra 连接器在融合升级到 3.3.0 后失败。 Cassandra驱动的版本是3.3。堆栈如下。 [2017-09-14 08:56:28,123] ERROR java.lang.re

首页

博学

6Ren·AI

商城

javascript - 带有融合图的响应式饼图