vue-chartjs - 关于 vue-chartjs 的一些问题
问题描述
在 Laravel 5.6 / vuejs 2.5 应用程序中,我使用 vue-chartjs,但我的图表看起来像: https ://imgur.com/a/ru1dXlm 我想要更多:
- 有几个项目(在我的情况下是艺术家)我想看到它们是半透明的,就像这里的第一个例子一样http://demo.vue-chartjs.org/
- 具有如上面链接中第一个示例所示值的点
- 我需要在这里查看 x 方向的所有标签(我填写标签参数)
- 如果有上面链接的演示示例的源代码 > 我搜索并没有找到...
谢谢!
解决方案
嗯,你应该在 chart.js 和 vue-chart.js 的文档中找到你需要的一切
您可以添加 rgb 值作为背景颜色以使其透明。您还可以将渐变用作画布元素。
这是一个教程:
这是 vue-chartjs 演示页面的源代码:
https://github.com/apertureless/vue-chartjs-demo (这有点过时,因为 v3 图表组件的创建有所改变)
看来您没有正确填写标签。
{
labels: ['Here', 'are', 'your', 'x-axis', 'labels'],
datasets: [
{
label: 'artist 1',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
data: [0, 1, 2, 3, 4],
},
{
label: 'artist 2',
backgroundColor: 'rgba(255, 99, 132, 0.2)',
data: [0, 1, 2, 3, 4],
},
],
}
推荐阅读
- html - 以不同顺序使用 div 的 flex 进行 CSS 定位
- apache-flink - Flink - Table SQL API - 向表中添加列
- node.js - 节点预gyp错误!堆栈错误:无法执行'/usr/local/bin/node /usr/local/lib/node_modules
- appium - 当我尝试在 Browserstack 上使用 AppiumDriver 运行测试时,我收到“页面对象类 integration.pages.login.LoginPage 看起来很狡猾:”错误
- floating-point - 当加数包含舍入误差时如何评估交替序列?
- magento2.2 - 在单个产品页面 Magento 2 上添加到购物车后如何重定向到结帐页面?
- python - 将空行添加到 python 数据框
- php - PHP中的字符串数组(检查2个或更多字符串是否具有相同的开头)
- cmake - Apache Thrift 编译 C++ 服务器
- webpack - 用 webpack-dev-server 收听地址?