<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
有人知道如何使用 chart.js 更改折线图的动画吗？ 网上搜chart.js的动画也搞不明白。
找到这个 chart.js animation documentation , 但并没有直接说图表配置中的缓动如何使用以及如何添加。
这是 the animations .
感谢您理解代码是否真的很简单。
最佳答案
举个例子: https://github.com/src-mgra/node-sqlite-chart/blob/master/showChart.js
一些文档来控制 bartikhness barPercentage 等。 https://www.chartjs.org/docs/latest/charts/bar.html
这是一个扩展的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<script src='Chart.min.js'></script>
</head>
<body>
<!-- pie chart canvas element -->
<canvas id="countries" width="600" height="400"></canvas>
<!-- bar chart canvas element -->
<canvas id="income" width="600" height="400"></canvas>
<script>
// pie chart data
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// pie chart options
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
// get pie chart canvas
var countries= document.getElementById("countries").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
// bar chart data
var barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : [456,479,324,569,702,600]
},
{
fillColor : "rgba(73,188,170,0.4)",
strokeColor : "rgba(72,174,209,0.4)",
data : [364,504,605,400,345,320]
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData);
</script>
</body>
</html>
引用:https://www.webdesignerdepot.com/2013/11/easily-create-stunning-animated-charts-with-chart-js/
查看 pieOptions 和 canvas-element ...示例可以详细测试以显示选项!
关于javascript - Chart.JS 改变动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57578653/
相关文章：
html - iPhone 不允许输入文本对 HTML 表单是可写的
javascript - 包括加载本地 CSV 文件并运行 wink-naive-bayes-text-classifier 的 Node 模块
javascript - 不通过自定义脚本导入的外部 CSS 库
css - 覆盖 Bootstrap 类 "nav-item"
javascript - 尝试使用带有 Node.js 的 Websockets (ws) 发送消息
javascript - 使用 Enter 键提交普通脚本表单
html - 包含 overflow-y 的 div 的高度 : hidden not expanding with content