热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何将colorfamily设置为chart.js中的饼图

如何解决《如何将colorfamily设置为chart.js中的饼图》经验,为你挑选了3个好方法。

我正在尝试使用Chart.js绘制饼图.我的值来自数据库,因此我不知道数据库中会有多少值.在这里,我想为每个值设置一个唯一的颜色.以下是我的例子.

var pieData = [
    {
        value: 20,
        color:"#878BB6"
    },
    {
        value : 40,
        color : "#4ACAB4"
    },
    {
        value : 10,
        color : "#FF8153"
    },
    {
        value : 30,
        color : "#FFEA88"
    }
];

var pieOptiOns= {
    segmentShowStroke : false,
    animateScale : true
}

var countries= document.getElementById("countries").getContext("2d");
        new Chart(countries).Pie(pieData, pieOptions);

目前在上面的示例中,我设置了硬编码值,但在我的示例中,数据(Json)来自DB.



1> Luca Mastros..:

我创造了一个简单的颜色系列,有15种不同的颜色.
它们不是随机选择的.相反,选择颜色以最大化近色之间的差异.

您仍然可以创建少于15个数据点的图表,并且不会生成任何警告.

这是代码:

ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            label: 'Colors',
            data: [9, 8, 7, 6, 5, 4, 3, 2, 1],
            backgroundColor: ["#0074D9", "#FF4136", "#2ECC40", "#FF851B", "#7FDBFF", "#B10DC9", "#FFDC00", "#001f3f", "#39CCCC", "#01FF70", "#85144b", "#F012BE", "#3D9970", "#111111", "#AAAAAA"]
        }],
        labels: ['a','b','c','d','e','f','g','h','i']
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: "Color test"
        }
    }
});

这是html:


在此输入图像描述

如果你想玩它,这里是jsfiddle上的代码.

我希望这个能帮上忙 :)



2> rtome..:

您可以循环思考您的pieData数组并为颜色值设置随机值.

您可以使用"rgb(230,0,0)"之类的值设置此值,并随机生成红色绿色蓝色整数值.

像这样的东西:

r = Math.floor(Math.random() * 200);
g = Math.floor(Math.random() * 200);
b = Math.floor(Math.random() * 200);
color = 'rgb(' + r + ', ' + g + ', ' + b + ')';

请参阅此处的jsfiddle示例,其中包含随机值和随机颜色.(运行几次以了解它如何使用不同的数据集显示.)

或者你可以定义一组预定义的颜色,然后使用它.请注意,包含超过50个项目的饼图不是非常可重复的.所以50的默认列表可能没问题.



3> Conny Olsson..:

首先,那里有很多色盲人。这是一篇有关图表和色盲的好文章: 为数据可视化找到合适的调色板

这使用Chart.js 2.4.0

我正在从这样的渐变计算不同的颜色:

这给出了很好的凝聚力外观。我已经从上面的链接中借用了调色板。我只测试了甜甜圈图,条形图和折线图,但是添加其他类型应该很容易。您也可以轻松制作自己的渐变。

您可以在此处找到jsfiddle。

HTML:



Palettes borrowed from:
Finding the Right Color Palettes for Data Visualizations

Javascript:

var ctx = document.getElementById('canvas').getContext('2d');
var chart;
var currentPalette = "cool";

function doughnut() {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["Bananas", "Street lights", "Emotions", "Colors", "Children", "Nodes"],
            datasets: [{
                data: [1, 2, 6, 9, 1, 2],
            }]
        },
    });
    chartColors();
}

function lineBar(type) {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
        type: type,
        data: {
            labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
            datasets: [{
                label: "Bananas",
                data: [1, 2, 6, 9, 1, 2]
            }, {
                label: "Street lights",
                data: [2, 6, 9, 1, 2, 7]
            }, {
                label: "Emotions",
                data: [2, 4, 6, 8, 6, 4]
            }, {
                label: "Colors",
                data: [3, 6, 3, 1, 3, 1]
            }, {
                label: "Children",
                data: [4, 4, 4, 5, 5, 5]
            }, {
                label: "Nodes",
                data: [5, 1, 2, 3, 4, 5]
            }, ]
        },
    });
    chartColors();
}

function chartColors(palette) {
    if (!palette) palette = currentPalette;
    currentPalette = palette;

    /*Gradients
      The keys are percentage and the values are the color in a rgba format.
      You can have as many "color stops" (%) as you like.
      0% and 100% is not optional.*/
    var gradient;
    switch (palette) {
        case 'cool':
            gradient = {
                0: [255, 255, 255, 1],
                20: [220, 237, 200, 1],
                45: [66, 179, 213, 1],
                65: [26, 39, 62, 1],
                100: [0, 0, 0, 1]
            };
            break;
        case 'warm':
            gradient = {
                0: [255, 255, 255, 1],
                20: [254, 235, 101, 1],
                45: [228, 82, 27, 1],
                65: [77, 52, 47, 1],
                100: [0, 0, 0, 1]
            };
            break;
        case 'neon':
            gradient = {
                0: [255, 255, 255, 1],
                20: [255, 236, 179, 1],
                45: [232, 82, 133, 1],
                65: [106, 27, 154, 1],
                100: [0, 0, 0, 1]
            };
            break;
    }

    //Get a sorted array of the gradient keys
    var gradientKeys = Object.keys(gradient);
    gradientKeys.sort(function(a, b) {
        return +a - +b;
    });

    //Find datasets and length
    var chartType = chart.config.type;
    switch (chartType) {
        case "pie":
        case "doughnut":
            var datasets = chart.config.data.datasets[0];
            var setsCount = datasets.data.length;
            break;
        case "bar":
        case "line":
            var datasets = chart.config.data.datasets;
            var setsCount = datasets.length;
            break;
    }

    //Calculate colors
    var chartColors = [];
    for (i = 0; i 

这将给出以下内容:


推荐阅读
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • PHP 编程疑难解析与知识点汇总
    本文详细解答了 PHP 编程中的常见问题,并提供了丰富的代码示例和解决方案,帮助开发者更好地理解和应用 PHP 知识。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • PyCharm下载与安装指南
    本文详细介绍如何从官方渠道下载并安装PyCharm集成开发环境(IDE),涵盖Windows、macOS和Linux系统,同时提供详细的安装步骤及配置建议。 ... [详细]
  • 本文详细介绍如何使用Python进行配置文件的读写操作,涵盖常见的配置文件格式(如INI、JSON、TOML和YAML),并提供具体的代码示例。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • 导航栏样式练习:项目实例解析
    本文详细介绍了如何创建一个具有动态效果的导航栏,包括HTML、CSS和JavaScript代码的实现,并附有详细的说明和效果图。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 本文介绍了如何使用JQuery实现省市二级联动和表单验证。首先,通过change事件监听用户选择的省份,并动态加载对应的城市列表。其次,详细讲解了使用Validation插件进行表单验证的方法,包括内置规则、自定义规则及实时验证功能。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 数据库内核开发入门 | 搭建研发环境的初步指南
    本课程将带你从零开始,逐步掌握数据库内核开发的基础知识和实践技能,重点介绍如何搭建OceanBase的开发环境。 ... [详细]
  • golang常用库:配置文件解析库/管理工具viper使用
    golang常用库:配置文件解析库管理工具-viper使用-一、viper简介viper配置管理解析库,是由大神SteveFrancia开发,他在google领导着golang的 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
author-avatar
qianweirui7058
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有