我一直试图让堆叠选项在chart.js的图表元素聚合物包装中工作而没有任何成功,我已经尝试了以下代码,但它只是给了我一个空白区域。这是我的column-chart.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/jquery/dist/jquery.min.js">
<link rel="import" href="../bower_components/chart-elements/chart-bar.html">
<chart-bar id="alarmsChart" data="[[data]]" style="width: 600px; height: 360px;"></chart-bar>
Polymer({
is: 'column-chart',
ready: function () {
this.data = {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: 'Dataset 1',
backgroundColor: "rgba(5,141,199,0.5)",
data: [100, 110, 95, 100, 100, 102, 101],
stack: 1
}, {
label: 'Dataset 2',
backgroundColor: "rgba(80,180,50,0.5)",
data: [94, 96, 98, 94, 97, 97, 96],
stack: 1
}, {
label: 'Dataset 3',
backgroundColor: "rgba(237,86,27,0.5))",
data: [98, 97, 87, 85, 99, 84, 94],
stack: 1
}]
},
options: {
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
}}
});
</script>
答案 0 :(得分:1)
1)在你的第三种背景颜色中有一个超出的画面:
backgroundColor: "rgba(237,86,27,0.5))",
应该是:
backgroundColor: "rgba(237,86,27,0.5)",
2)您尝试在data
对象中插入data
属性,这是多余的。
3)您不必定义type: 'bar'
属性,因为它是由控件的名称设置的。
4)对于options
属性,options
对象应单独设置:
<dom-module id="column-chart">
<template>
<div>
<chart-bar data="[[data]]" options="[[options]]"></chart-bar>
</div>
</template>
<script>
Polymer({
is: 'column-chart',
ready: function() {
this.data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: 'Dataset 1',
backgroundColor: "rgba(5,141,199,0.5)",
data: [100, 110, 95, 100, 100, 102, 101],
stack: 1
},
{
label: 'Dataset 2',
backgroundColor: "rgba(80,180,50,0.5)",
data: [94, 96, 98, 94, 97, 97, 96],
stack: 1
},
{
label: 'Dataset 3',
backgroundColor: "rgba(237,86,27,0.5)",
data: [98, 97, 87, 85, 99, 84, 94],
stack: 1
}]
}
this.options = {
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
}
});
</script>
</dom-module>
&#13;