條形圖chartjs邊框控件

Question

我的第一張票。

我有點堅持一個簡單的要求。

我想在這個條形圖上加上黑色邊框。

 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'] } ] } } )

在此先感謝您的幫助！

Answer 1

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)']
                        }
                    ]
            }
        }
    )

Answer 2

如果您想要圍繞整個圖表或條形圖周圍的邊框，則不是很清楚。

如果你想要酒吧周圍的邊框：

您可以簡單地將 borderColor 數組插入數據集中。 檢查我的例子：

 var ctx = document.getElementById("my-chart").getContext("2d"); console.log('hi', ctx) var myChart = new Chart(ctx, { type: 'bar',/*from w ww.ja va2 s. c om*/ 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>

現在，如果您想要在圖表周圍添加邊框，只需將 canvas 包裹在一個 div 中並為其添加邊框即可。

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

我希望它可以幫助你。

條形圖chartjs邊框控件

問題描述

2 個解決方案

解決方案1
1 2022-05-01 13:49:06

解決方案2
0 2022-05-02 14:57:20

條形圖chartjs邊框控件

問題描述

2 個解決方案

解決方案1 1 2022-05-01 13:49:06

解決方案2 0 2022-05-02 14:57:20

解決方案1
1 2022-05-01 13:49:06

解決方案2
0 2022-05-02 14:57:20