当前位置：文江博客话题详情

zui中的chart图表柱状图插件修改不了颜色？

发布于 2022-09-04 23:40:26 字数 1543 浏览 30 评论 0

在线测试地址：http://bbs2.valueonline.cn/we...

图片描述

下面demo和官方的是一样的，为什么它有颜色，我的是灰色的？
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>zui柱状图插件chart</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="zui.min.js">
    <script type="text/javascript" src="zui/dist/lib/chart/zui.chart.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="myBarChart" style="width:500px;" width="500px;"></canvas>
<script type="text/javascript">
var data = {
    labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
    datasets: [
        {
            label: "蓝队",
            color: 'primary',
            data: [65, 59, 80, 81, 56, 55, 40]
        }, {
            label: "绿队",
            color: 'green',
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var options = {responsive: true}; // 图表配置项，可以留空来使用默认的配置
var myBarChart = $('#myBarChart').barChart(data, options);
</script>
</body>
</html>

官方demo地址：
http://zui.sexy/#view/chart

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（2）

坏尐絯 2022-09-11 23:40:26

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>zui柱状图插件chart</title>
    <link rel="stylesheet" type="text/css" href="http://zui.sexy/docs/css/zui.min.css">
    <script type="text/javascript" src="http://zui.sexy/assets/jquery.js"></script>
    <script type="text/javascript" src="http://zui.sexy/docs/js/zui.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="myBarChart" style="width:500px;" width="500px;"></canvas>
<script type="text/javascript">
var data = {
    labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
    datasets: [
        {
            label: "蓝队",
            color: 'blue',
            data: [65, 59, 80, 81, 56, 55, 40]
        }, {
            label: "绿队",
            color: 'green',
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var options = {responsive: true}; // 图表配置项，可以留空来使用默认的配置
var myBarChart = $('#myBarChart').barChart(data, options);
</script>
</body>
</html>

回心转意 2022-09-11 23:40:26

引入了老版本的zui.min.css,zui.min.js导致没有颜色
另外zui.min.js 应该写成src引入方式
还要再引入两个文件

    <link rel="stylesheet" type="text/css" href="css/colorset.css">
    <script type="text/javascript" src="zui/src/js/colorset.js"></script>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文