vue.js - Vuejs - Chartjs - 将圆环图转换为仪表 - 旋转
问题描述
我是 vue.js 的新手,非常感谢您的帮助和建议。
我正在使用 Chartjs,我想旋转我的饼图,使它看起来像一个仪表。我不确定我的 javascript 哪里出了问题,并且我在控制台中没有收到任何错误 - 有人可以建议我吗
我不确定我是否没有将“选项”放在正确的位置
chartjs.html
<div class="wrapper">
<div class="chart_header">chartjs guage</div>
<vue-chartsguagejs></vue-chartsguagejs>
</div>
图表jsgauge.js
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
mounted () {
this.renderChart({
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [{
label: 'GitHub Commits',
backgroundColor: ['rgb(255, 255, 255)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [50, 10, 10, 10, 10, 10],
}],
options: {
cutoutPercentage: 0,
rotation: -3.1415926535898,
circumference: 3.1415926535898,
}
}, {responsive: true, maintainAspectRatio: false})
}
}
解决方案
我发现以这种格式重组我的代码产生了巨大的变化:
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
data () {
return {
datacollection: {
labels: ["Log Level", "Debug", "Info", "Warn", "Error", "Fatal"],
datasets: [
{
label: 'GitHub Commits',
backgroundColor: ['rgb(226,126,64)', 'rgb(232,226,202)', 'rgb(226,210,172)', 'rgb(223,189,139)', 'rgb(223,162,103)','rgb(226,126,64)'],
borderWidth: 0,
hoverBorderWidth: 0,
data: [10, 10, 10, 10, 10],
}
]
},
options: {
rotation: -1.0 * Math.PI,
circumference: Math.PI,
}
}
},
mounted () {
this.renderChart(this.datacollection, this.options, {responsive: true, maintainAspectRatio: false})
}
}
推荐阅读
- .net - .net 版本 3.0.225 中的 Specflow 不会在我的项目中加载 feature.cs 文件
- php - Slim3 不能使用 Slim\Http\Response 类型的对象作为数组
- c - 为什么 select(2) 称为“同步”多路复用?
- corda - Corda 如何安全地分叉并保持兼容?
- reactjs - 如何阻止组件多次重新渲染?
- c# - 机器人在何处/何时为每个用户进行新对话
- android - Admob 一直告诉我我的应用程序不符合指南要求
- python - 减少所需 if 语句的数量
- php - 具有相同请求标头的 BASH cURL 和 PHP cURL 的不同响应
- php - 为什么我会随 SMS 一起接收命令?