Hi,
I build my first polymer components. The standalone versions (only working
with simple html elements) are working without problems. After that I tried
to use polymer to create components with the use of other frameworks.
I trie to create a doughnut chart element using Chart.js Framework.
<link rel="import" href="bower_components/polymer/polymer.html">
<polymer-element name="doughnut-chart" attributes="doughnutChartData title">
<template>
<style>
#chart{
width: 180px;
height: 180px;
background-color: rgba(33, 67, 116, 0.74)
}
#chartTitle{
color:#eee; text-align: center; font-size: 10px;
}
</style>
<div id="chart" >
<div id="chartTitle">{{title}}</div>
<canvas id="doughnutChart" width="100" height=100" ></canvas>
</div>
</template>
<script>
Polymer('doughnut-chart',{
domReady:function(){
var ctx = this.$.doughnutChart.getContext("2d");
this.doughnutChartData = doughnutChartData;
this.chartHeight = Number(this.height) + 35;
this.chartWidth = Number(this.width) + 25;
this.myDoughnutChart = new
Chart(ctx).Doughnut(this.doughnutChartData, {
responsive : true,
animation: false,
showScale:false
});
}
});
</script>
</polymer-element>.
The doughnut chart is shown but the scaling of the chart is not correct !
It looks like that the Chart.js framework works inside a template (inside
the shadow dom) not in the same way as in a normal (without polymer) way.
What can I do to change this behavior ?
Best regards
Andreas
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/9a78e790-baf5-4070-99e1-8e8c25f18db6%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
