gpt4 book ai didi

javascript - 我们如何使用 Chart.js 在 Polymer 1.0 上构建图表?

转载 作者:行者123 更新时间:2023-12-03 09:27:24 26 4
gpt4 key购买 nike

我想知道我们是否有现成的聚合物 1.0 图表元素。我正在尝试将图表 donut ( https://github.com/robdodson/chart-elements/ ) 从聚合物 0.5 迁移到使用 Chart.js 脚本的 1.0。

我已经通过以下方式迁移了chart-doughnut.html文件:

  <link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="chart-js-import.html">

<!--
Pie and doughnut charts are probably the most commonly used chart there are. They are divided into segments, the arc of each segment shows a the proportional value of each piece of data.

They are excellent at showing the relational proportions between data.

Pie and doughnut charts in are effectively the same class in Chart.js, but have one different default value - their percentageInnerCutout. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts.

They are also registered under two aliases in the Chart core. Other than their different default value, and different alias, they are exactly the same.

##### Example

<chart-doughnut values="[30, 50, 100, 40, 120]"></chart-doughnut>

@element chart-doughnut
@blurb A chart for showing the relational proportions between data.
@status alpha
@homepage http://robdodson.github.io/chart-elements
-->
<dom-module id="chart-doughnut">
<template>
<canvas id="canvas" width="{{width}}" height="{{height}}"></canvas>
</template>
<script>
Polymer({
is: 'chart-doughnut',
properties: {
colors: {
type: Array,
value: ['#F7464A',
'#46BFBD',
'#FDB45C',
'#949FB1',
'#4D5360'
];
},
notify: true,
observer: 'updateChart'
},
height: {
notify: true,
observer: 'resize'
},
options: {
type: Object,
value: {};
},
notify: true,
observer: 'updateChart'
},
values: {
type: Array,
value: [
30,
50,
100,
40,
120
];
},
notify: true,
observer: 'updateChart'
},
width: {
notify: true,
observer: 'resize'
}
},
resize: function () {
if (this.chart) {
this.updateChart();
}
},
updateChart: function () {
this.async(function () {
if (this.chart) {
console.log("CHARTTTT"+this.chart);
this.chart.destroy(); // Bindings don't seem to be taking effect properly so
// manually set width and height
// Bindings don't seem to be taking effect properly so
// manually set width and height
this.$.canvas.setAttribute('width', this.width);
this.$.canvas.setAttribute('height', this.height);
}
this.data = [];
this.values.forEach(function (val, i) {
this.data.push({
color: this.colors[i],
value: val
});
}, this);
this.ctx = this.$.canvas.getContext('2d');
this.chart = new Chart(this.ctx).Doughnut(this.data, this.options);
}, null, 0);
}
});
</script>
</dom-module>

但是在使用它时,我在 Chart.js 中收到以下错误

Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative. Chart.js:1226 0 0 -0.5 4.71238898038469 4.713461589614612

请提出建议。

最佳答案

初始化图表 Canvas 时没有宽度和高度。

修复此问题的最简单方法是使用 setTimeout 将其移至下一个刻度。

var self = this;
setTimeout(function() {
self.chart = new Chart(self.ctx).Doughnut(self.data, self.options);
}, 0)
<小时/>

Plunkr - http://plnkr.co/edit/i3HrDxd5jUfTfLPVlNPg?p=preview

<小时/>

请注意,如果您对折线图执行相同的操作,则属性必须是正确的 JSON(即应使用“而不是 ')

<chart-line width="400"
height="200"
labels='["Monday","Tuesday","Wednesday","thursday","Friday","Saturday","Sunday"]'
values="[[10,14,20,25,13,9,40]]"
colors='["253,180,92","247,70,74","70,191,189","148,159,177","77,83,96"]'>
</chart-line>
<小时/>

Plunkr - http://plnkr.co/edit/o74WRX404NWhHGiNqkC8?p=preview

关于javascript - 我们如何使用 Chart.js 在 Polymer 1.0 上构建图表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31626120/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com