条形图chartjs边框控件
[英]Bar chart chartjs border control
问题描述
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 !在此先感谢您的帮助！
2 个解决方案
解决方案1
1 2022-05-01 13:49:06
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)']
}
]
}
}
)
解决方案2
0 2022-05-02 14:57:20
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.您可以简单地将 borderColor 数组插入数据集中。 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.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>
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.现在，如果您想要在图表周围添加边框，只需将 canvas 包裹在一个 div 中并为其添加边框即可。
<div style="border:1px solid black;">
<canvas id="my-chart" width="400" height="400"></canvas>
</div>
I hope it can help you.我希望它可以帮助你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.