Javascript Chart.js值操作

Javascript Chart.js值操作,javascript,charts,Javascript,Charts,我真的需要这个坏为我的项目。我正在使用Chart.js,到目前为止,我已经能够创建一个甜甜圈图表。我遇到的主要问题是如何根据我需要如何显示图表的值来操作图表的值。例如,性别的第一个值是240(男性),我想根据我在下拉列表中选择的月份(不包括在代码中)向该数字添加40。有没有办法操纵这些值 <DOCTYPE html> <html> <head> <title>Chart JS</title> <script src="j

我真的需要这个坏为我的项目。我正在使用Chart.js,到目前为止,我已经能够创建一个甜甜圈图表。我遇到的主要问题是如何根据我需要如何显示图表的值来操作图表的值。例如,性别的第一个值是240(男性),我想根据我在下拉列表中选择的月份(不包括在代码中)向该数字添加40。有没有办法操纵这些值

<DOCTYPE html>
<html>

<head>
<title>Chart JS</title>
    <script src="jquery-3.2.1.js"></script>
    <script src="Chart.js"></script>
    <link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<div class="block">     
<canvas id="gender" width="256" height="256"> <script> 
        $(document).ready(function(){
var ctx = $("#gender").get(0).getContext("2d");
            //pie chart data
            //sum of values = 360
            var data = [
                {
                    value: 240,
                    color: "cornflowerblue",
                    highlight: "lightskyblue",
                    label: "Male"
                },
                {
                    value: 120,
                    color: "lightgreen",
                    highlight: "yellowgreen",
                    label: "Female"
                }
            ];
            //draw
            var piechart = new Chart(ctx).Doughnut(data);
        });
    </script>

 </div>


<div class="block">
<canvas id="agegroup" width="256" height="256">
<script>
        $(document).ready(function(){
            var ctx = $("#agegroup").get(0).getContext("2d");
            //pie chart data
            //sum of values = 360

            var n = 10;
            var data = [
                {
                    value: 240,
                    color: "cornflowerblue",
                    highlight: "lightskyblue",
                    label: "Male"
                },
                {
                    value: 120,
                    color: "lightgreen",
                    highlight: "yellowgreen",
                    label: "Female"
                }, {
                    value: 120,
                    color: "#E54343",
                    highlight: "#CE7373",
                    label: "Female"
                },

                {
                    value: 120,
                    color: "lightgreen",
                    highlight: "yellowgreen",
                    label: "Female"
                },

                {
                    value: 120,
                    color: "lightgreen",
                    highlight: "yellowgreen",
                    label: "Female"
                }



            ];
            //draw
            var piechart = new Chart(ctx).Doughnut(data);
        });
    </script>


</div>

</body>
</html>
enter code here

图表JS
$(文档).ready(函数(){
var ctx=$(“#性别”).get(0.getContext(“2d”);
//饼图数据
//值之和=360
风险值数据=[
{
价值:240,
颜色:“矢车菊蓝”,
亮点:“天蓝色”,
标签:“男性”
},
{
数值:120,
颜色:“浅绿色”,
推荐理由:“黄绿色”,
标签:“女性”
}
];
//画
var piechart=新图表(ctx).甜甜圈(数据);
});
$(文档).ready(函数(){
var ctx=$(“#年龄组”).get(0.getContext(“2d”);
//饼图数据
//值之和=360
var n=10;
风险值数据=[
{
价值:240,
颜色:“矢车菊蓝”,
亮点:“天蓝色”,
标签:“男性”
},
{
数值:120,
颜色:“浅绿色”,
推荐理由:“黄绿色”,
标签:“女性”
}, {
数值:120,
颜色:#E54343“,
亮点:“CE7373”,
标签:“女性”
},
{
数值:120,
颜色:“浅绿色”,
推荐理由:“黄绿色”,
标签:“女性”
},
{
数值:120,
颜色:“浅绿色”,
推荐理由:“黄绿色”,
标签:“女性”
}
];
//画
var piechart=新图表(ctx).甜甜圈(数据);
});
在这里输入代码

您可以按月编写包含所有值的下拉代码吗?我仍在努力工作,但Jan的值是20男30女,这应该使该值为240到260男150女。你能按月编写包含所有值的下拉代码吗?我仍在努力,但Jan的值是20男30女,这应该是240到260男150女。