Javascript 这是chart.js中的定制问题

Javascript 这是chart.js中的定制问题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我使用chart.js,但不应用css。我使用chart.js,但不知道如何调整位置和大小以及移动标签 @lang('home/main.penpal\u count') var ctx=document.getElementById('myChart').getContext('2d'); var myChart=新图表(ctx{ 键入“pie”, 数据:{ 标签:['한국', '일본'], 数据集:[{ 标签:“#投票数”, 数据:[{ !!$KoraseUnderCount!! }

我使用chart.js,但不应用css。我使用chart.js,但不知道如何调整位置和大小以及移动标签


@lang('home/main.penpal\u count')

var ctx=document.getElementById('myChart').getContext('2d'); var myChart=新图表(ctx{ 键入“pie”, 数据:{ 标签:['한국', '일본'], 数据集:[{ 标签:“#投票数”, 数据:[{ !!$KoraseUnderCount!! }, { !!$japanSenderCount!! } ], 背景颜色:[ “红色”, “蓝色”, ], }] }, 选项:{ MaintaintAspectRatio:false, } }); 帆布{ 宽度:400px!重要; 高度:170px!重要; 利润底部:3%; }

我想从侧面移除标签,并将其设置为适合上分区。我的目标是以类似的方式将其应用于第二张图片。

尝试此操作,此处添加了标签位置,从


试试这个,这里添加了标签的位置,从

<div class="penpal-count-box">
<div class="col">
    <h5 style="padding-top:2%"><i class="fa fa-globe" style="color:blue"> 
  </i>&nbsp;@lang('home/main.penpal_count')
    </h5>
    <hr>

    <canvas id="myChart"></canvas>

  </div>

</div>


<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['한국', '일본'],
        datasets: [{
            label: '# of Votes',
            data: [{
                    !!$koreaSenderCount!!
                },
                {
                    !!$japanSenderCount!!
                }
            ],
            backgroundColor: [
                'red',
                'blue',

            ],
        }]
    },
    options: {
        maintainAspectRatio: false,
    }
});

</script>

<style>
 canvas {
    width: 400px !important;
    height: 170px !important;
    margin-bottom: 3%;
}

</style>
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['한국', '일본'],
        datasets: [{
            label: '# of Votes',
            data: [{
                    !!$koreaSenderCount!!
                },
                {
                    !!$japanSenderCount!!
                }
            ],
            backgroundColor: [
                'red',
                'blue',

            ],
        }]
    },
    options: {
        maintainAspectRatio: false,
        legend: {
          position:'right',   // from this line you can get your labels in right direction    
        },
    }
});