html - FusionChart AngularJS : Cannot display two separate charts "No Data to display"-6ren

html - FusionChart AngularJS : Cannot display two separate charts "No Data to display"

转载作者：行者123 更新时间：2023-11-27 23:38:01

25

4

代码与教程几乎相同。这是 HTML:

<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource}}" >
</div>
<div fusioncharts
    width="300"
    height="100"
    type="column2d"
    dataSource="{{myDataSource2}}" >
</div>

这是我的 AngularJS 代码:

$scope.myDataSource = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Items_Sold.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Items_Sold.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Items_Sold.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Items_Sold.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Items_Sold.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Items_Sold.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Items_Sold.toString()
        }
    ]
};
$scope.myDataSource2 = {
    chart: {
        caption: weekObject.week
    },
    data: [
        {
            label: "Saturday",
            value: weekObject.days[0]._FE_Transactions.toString()
        },
        {
            label: "Sunday",
            value: weekObject.days[1]._FE_Transactions.toString()
        },
        {
            label: "Monday",
            value: weekObject.days[2]._FE_Transactions.toString()
        },
        {
            label: "Tuesday",
            value: weekObject.days[3]._FE_Transactions.toString()
        },
        {
            label: "Wednesday",
            value: weekObject.days[4]._FE_Transactions.toString()
        },
        {
            label: "Thursday",
            value: weekObject.days[5]._FE_Transactions.toString()
        },
        {
            label: "Friday",
            value: weekObject.days[6]._FE_Transactions.toString()
        }
    ]
};

当我运行它时，我得到了第一个要呈现的图表。第二个只有短语“没有数据可显示”。我注意到即使使用第一张图，如果我将数据源命名为“myDataSource”以外的任何名称，它也不会呈现。这让我感到困惑，因为如果我不能引用多个数据变量进行绑定(bind)，我怎么可能拥有包含多个图表的页面呢？我觉得这更像是解决我的无知而不是解决我的代码类型问题但是..

问题:如何使用具有不同数据的 FushionCharts 渲染多个图形？

最佳答案

适用于我的情况。

var app = angular.module('dashApp', ["ng-fusioncharts"]);
        
app.controller('fusionController', ["$scope", function ($scope) {
    $scope.myDataSource1 = {
        chart: {caption: "Some week"},
        data: [
            {label: "Saturday", value: "100"},
            {label: "Sunday", value: "300"},
            {label: "Monday", value: "150"},
            {label: "Tuesday", value: "240"},
            {label: "Wednesday", value: "300"},
            {label: "Thursday", value: "90"},
            {label: "Friday", value: "170"}
        ]
    };

    $scope.myDataSource2 = {
        chart: {
            caption: "Some other week"
        },
        data: [
            {label: "Saturday", value: "1100"},
            {label: "Sunday", value: "1300"},
            {label: "Monday", value: "1150"},
            {label: "Tuesday", value: "1240"},
            {label: "Wednesday", value: "1300"},
            {label: "Thursday", value: "190"},
            {label: "Friday", value: "1170"}
        ]
    };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script>
<body ng-app="dashApp">
    <div class="modal-body" ng-controller="fusionController">
        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource1}}" >
        </div>

        <div fusioncharts
            width="600"
            height="300"
            type="column2d"
            dataSource="{{myDataSource2}}" >
        </div>
    </div>
</body>

它是否不适用于任何特定场景？

关于html - FusionChart AngularJS : Cannot display two separate charts "No Data to display"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32919060/

25

4

0

文章推荐： javascript - 如何向 JointJs HTML View 添加另一个 Paper 变量？

文章推荐： javascript - 通过 dbuezas 在 D3 Pie 中添加外部数据

文章推荐： css - 调整窗口大小时，如何使 div 标签内的图像响应？

android - 除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间有什么区别？
除了 Display.getOrientation() 已弃用之外，Display.getRotation() 和 Display.getOrientation() 之间还有什么区别？是否都返回等于
html - float :left; vs display:inline; vs display:inline-block; vs display:table-cell;
我的问题这些方法中有哪一种是专业网页设计师所偏爱的吗？ Web 浏览器在绘制网站时是否首选这些方法中的任何一种？这只是个人喜好吗？我还缺少其他技巧吗？注意:以上问题是关于设计多列布局 floa
html - float :left; vs display:inline; vs display:inline-block; vs display:table-cell;
我的问题专业网页设计师是否喜欢这些方法？网页浏览器在绘制网站时是否首选这些方法？这只是个人喜好吗？我还缺少其他技术吗？注意:以上问题与设计多列布局有关 float :左； http://js
rust - 如何在类型已经实现 Display 的特征对象上实现 Display
我有一些代码返回 MyTrait 类型的特征对象，这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait，这样我就可以打印对象，并将详细信息委托(delegate)
java - 当重载相同的方法 display(String s ) 和 display(Object o) 时，当从 main 方法的方法中传递 null 时，为什么调用 display(String s )？
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
swt - Display.asyncExec 与 Display.timerExec
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而，似乎Display.timerExec只
python - pygame.display.update和pygame.display.flip之间的区别
就像标题所暗示的，有什么区别吗？我当时使用的是pygame.display.flip，我在互联网上看到的是，他们使用pygame.display.update而不是使用flip。哪一个更快？最佳答案
java - Sample.this.display() 和 this.display() 之间的区别
Sample.this.display() 和 this.display() 哪个更好？ class Sample{ void display(){ System.out.println("d
javascript - JS监控CSS属性变化如 "display:none"= >"display:block"？
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时，我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗？ $(this).bind.('propertychange',
css - 什么是谷歌字体的 "Display"类别/"Display font"
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线展示手写我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
java - 自定义 html
我想知道是否可以在列标记内渲染自定义 html，这是显示表标记的一部分。例如，我希望我的专栏里面有一些下拉列表？使用纯 html，如下所示: ... Volvo Saab Me
image - 电晕中的 display.newImage() 与 display.newImageRect()
display.newImage() 和 display.newImageRect() 有什么区别？哪个更好用？最佳答案 display.newImage() 的文档具体提到: NOTE: dis
javascript - 配对显示 : flex with display: block and display: none
我正在使用纯 JS 和 flexbox 为我的元素创建网格。元素的某些部分在页面加载时被显示隐藏:无，但单击按钮后它应该在不显示和阻止之间切换。可悲的是，这完全破坏了 display: flex
html - .desktop {display :none;}/. mobile {display:inline;}
我目前正在参加 HTML/CSS 类(class)，这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
javascript - 单击时从 'display : none' 过渡到 'display:inline'
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
html - 风格="display: block"和风格="display: "的区别
我理解 style="display: none" 隐藏一个 HTML 元素，而 style="display: block" 显示一个 block 级 HTML 元素。我看到一些使用 style=
html - display none 和 display block 的区别
设置控件的样式 display: none 和 display: block 有什么区别？最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
javascript - this.state.display &&
Displayed!
有效，但反之则不然？
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。假设我只想在 this.state.display 为
struct - 如何从结构中获取 fmt::Display 并将其显示在另一个结构的 fmt::Display 中？
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含
struct - 如何从结构中获取 fmt::Display 并将其显示在另一个结构的 fmt::Display 中？
我不确定如何命名这个问题，因为我是 Rust 新手，所以请随意提出修改建议。我有两个结构。一个是 Job 结构，其中包含一些数字，例如作业需要多长时间等。另一个是 JobSequence，其中包含

首页

博学

6Ren·AI

商城

html - FusionChart AngularJS : Cannot display two separate charts "No Data to display"

Displayed!