关于 vue-chartjs 的一些问题

Question

在 Laravel 5.6 / vuejs 2.5 应用程序中，我使用 vue-chartjs，但我的图表看起来像： https://imgur.com/a/ru1dXlm 我想要更多：

• 有几个项目（在我的例子中是艺术家）我想看到它们是半透明的，就像这里的第一个例子一样 http://demo.vue-chartjs.org/
• 点的值如上面链接中的第一个示例所示
• 我需要在这里查看 x 方向的所有标签（我填写标签参数）
• 如果上面有链接demo示例的源代码> 我搜了没找到...

谢谢！

Answer 1

嗯，你应该在 chart.js 和 vue-chart.js 的文档中找到你需要的一切

• http://www.chartjs.org/docs/latest/
• http://vue-chartjs.org/#/home?id=resources

您可以添加 rgb 值作为背景颜色以使其透明。 您也可以将渐变用作画布元素。

这是一个教程：

https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a?source=user_profile---------5----------------

这里是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],
     },
   ],
 }