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

条形图Chartjs边界控制

发布于 2025-01-25 18:34:03 字数 775 浏览 2 评论 0原文

我的第一张票。

我有点简单的要求。

我想在此条形图上放一个黑色边框。

CFFCHART(
        'my-chart',
        {
            type:'bar',
            data:{
                labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
                    datasets:[
                        {
label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165],
backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4']
                        }
                    ]
            }
        }
    )

在此先感谢您的任何帮助！

原文

First ticket for me.

I am kind of stuck with a simple requirement.

I would like to put a black border on this bar chart.

CFFCHART(
        'my-chart',
        {
            type:'bar',
            data:{
                labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
                    datasets:[
                        {
label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165],
backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4']
                        }
                    ]
            }
        }
    )

Thanks in advance for any help !

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

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

发布评论

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

评论（2）

自此以后，行同陌路 2025-02-01 18:34:03
CFFCHART(
        'my-chart',
        {
            type:'bar',
            data:{
                labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
                    datasets:[
                        {
label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165],
backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'],
borderWidth: 2,
borderColor:['rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)']
                        }
                    ]
            }
        }
    )

CFFCHART(
        'my-chart',
        {
            type:'bar',
            data:{
                labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
                    datasets:[
                        {
label:'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
data:[fieldname363, fieldname331, fieldname153, fieldname61, fieldname165],
backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'],
borderWidth: 2,
borderColor:['rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)','rgba(0,0,0)']
                        }
                    ]
            }
        }
    )
回复 原文
甜柠檬 2025-02-01 18:34:03

目前尚不清楚您是否想要整个图表周围的边框或栏周围的边界。

如果您想在条形周围边界：

您可以简单地将边框彩色阵列插入数据集。检查我的示例：

    var ctx = document.getElementById("my-chart").getContext("2d");
    console.log('hi', ctx)
    var myChart = new Chart(ctx, {
    type: 'bar',/*from   w  ww.j  a  va2  s . c  o m*/
    data: {
        labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
        datasets: [{
            label: 'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
            data: ['34', '55', '77', '96', '344'],
            backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'],
            borderColor: [
                'black',
                'black',
                'black',
                'black',
                'black',
                'black'
            ],
            borderWidth: 4
        }]
    }, 
});
<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body>  
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>   
      <div> 
         <canvas id="my-chart" width="400" height="400"></canvas> 
      </div>   
   </body>
</html>

现在，如果您想在图表上围绕着边框，则可以将画布包裹在DIV内，然后在其上添加边框。

<div style="border:1px solid black;"> 
<canvas id="my-chart" width="400" height="400"></canvas> 
</div>

我希望它能为您提供帮助。

It is not very clear if you want a border around your entire chart or around the bars.

If you want border around the bars:

You can simply insert a borderColor array into your dataset. Check my example:

    var ctx = document.getElementById("my-chart").getContext("2d");
    console.log('hi', ctx)
    var myChart = new Chart(ctx, {
    type: 'bar',/*from   w  ww.j  a  va2  s . c  o m*/
    data: {
        labels:['YOUR OVERALL SCENARIO', 'MARKET IMPLIED SCENARIO', 'WORST CASE SCENARIO', 'BASE CASE SCENARIO', 'BEST CASE SCENARIO'],
        datasets: [{
            label: 'UPSIDE/DOWNSIDE SCENARII ANALYSIS',
            data: ['34', '55', '77', '96', '344'],
            backgroundColor:['rgba(255,255,255, 0.4)', 'grey', 'rgba(255,0,0, 0.4)', 'rgba(60,179,113, 0.4)', 'rgba(0,0,255, 0.4'],
            borderColor: [
                'black',
                'black',
                'black',
                'black',
                'black',
                'black'
            ],
            borderWidth: 4
        }]
    }, 
});
<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body>  
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>   
      <div> 
         <canvas id="my-chart" width="400" height="400"></canvas> 
      </div>   
   </body>
</html>

Now if you want a border all around your chart, you can just wrap the canvas inside a div and add a border to it.

<div style="border:1px solid black;"> 
<canvas id="my-chart" width="400" height="400"></canvas> 
</div>

I hope it can help you.

回复 原文
~没有更多了~

关于作者

久随

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

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

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

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