Monaca / Onsen 2.0 - 图表库在<ons-navigator>中不起作用(SVG和Canvas)
Monaca / Onsen 2.0 - Charts libraries not working (SVG and Canvas) in <ons-navigator>
所以我遵循了本教程:https://onsen.io/blog/charts-angularjs-hybrid-app-nvd3/,我无法通过调试器在模拟器或设备上呈现图表。我尝试过图表.JS以及NVD3都没有成功。 对于这个问题,我正在尝试NVD3。我的代码如下:
索引.html - 头:
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">
<script src="lib/js/D3_Chart.js"></script>
索引.html - 正文:
<ons-template id="gameon.html">
<ons-page>
<ons-toolbar>
<div class="center">Game On!</div>
</ons-toolbar>
<ons-navigator id="gameNavigator">
<ons-page>
<ons-list modifier="inset">
<ons-list-item modifier="chevron">Page 1</ons-list-item>
<ons-list-item modifier="chevron">Page 2</ons-list-item>
</ons-list>
<ons-button>Above Chart</ons-button>
<div id='chart2'>
<svg> </svg>
</div>
<ons-button>Below Chart</ons-button>
</ons-page>
</ons-navigator>
</ons-page>
</ons-template>
D3_Chart.js:
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true) //Display pie labels
.labelThreshold(.05) //Configure the minimum slice size for labels to show up
.labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
.donut(true) //Turn on Donut mode. Makes pie chart look tasty!
.donutRatio(0.35) //Configure how big you want the donut hole size to be.
;
d3.select("#chart2 svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
//Pie chart example data. Note how there is only a single array of key-value pairs.
function exampleData() {
return [
{
"label": "One",
"value" : 29.765957771107
} ,
{
"label": "Two",
"value" : 0
} ,
{
"label": "Three",
"value" : 32.807804682612
} ,
{
"label": "Four",
"value" : 196.45946739256
} ,
{
"label": "Five",
"value" : 0.19434030906893
} ,
{
"label": "Six",
"value" : 98.079782601442
} ,
{
"label": "Seven",
"value" : 13.925743130903
} ,
{
"label": "Eight",
"value" : 5.1387322875705
}
];
}
我对数据尝试了不同的语法,因为该示例有几种不同的形式,但都不会生成图表。 我没有使用AngularJS。
我已经确认此代码适用于 Chrome 和 Android 的默认浏览器,但不适用于 Monaca。 此外,我担心域问题,所以我也尝试了引用的JS和CSS文件下载并添加到项目中。 不会生成任何错误,只是图表不显示。
编辑:更新以明确显示<ons>
标签,如下所述。 关键是,代码在Chrome和Android浏览器中运行良好(我假设iOS也是如此,只是无法访问测试(,但它无法在Monaca/Onsen 2.0项目中执行。 代码来自温泉博客,这让我想知道 2.0 是否破坏了此功能。
答:正如我在下面的评论中发布的那样,问题不在于温泉,而在于如何/何时将对象添加到 DOM。 这篇文章提供了细节:Onsen 2.0 - 使用Javascript将事件侦听器添加到Ons-Switch。
我发现这是另一篇文章:
document.addEventListener("init", function(event) {
if (event.target.id == "my-page") {
document.getElementById("my-switch").addEventListener('change', function(e) {
console.log('click', e);
});
}
}, false);
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用