在bar chart.js中改变垂直线和颜色的条形图

问题描述 投票:0回答:1

enter image description here

帮助我!如何在bar chartjs中删除bar chart上的数字数据。

    let datas_1 = [97,70,87,43,35,18];
    let colorHex_1 = ['#ebeef3','#ebeef3','#ebeef3','#ebeef3','#ebeef3','#ebeef3'];
    let labels_1 = ['10대','12대','30대','40대','50대','60대이상'];
    var myBarChart = new Chart(ctx_1, {
        type: 'horizontalBar',
        data: {
            datasets: [{
                data: datas_1 ,
                backgroundColor: colorHex_1,
                borderWidth: 0,
                barPercentage: 1,
            }],
            labels: labels_1,
        },
        options: {
            responsive: true,
            legend: {
                display:false,
            },
            scales: {
                xAxes: [{
                    display:false,
                }],
                yAxes: [{
                    gridLines:{
                        display:false,
                        color: "black"
                    },
                    maxBarThickness: 20,
                }]
            }
        }
    });


如何在柱状图中删除柱状图上的数字数据.js?

javascript php html jquery chart.js
1个回答
2
投票

工作演示。https:/jsfiddle.netusmanmunirhz3gLj193

试试这个代码。

let datas_1 = [97,70,87,43,35,18];
let colorHex_1 = ['#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3', '#ebeef3'];
let labels_1 = ['10대', '12대', '30대', '40대', '50대', '60대이상'];

var ctx = document.getElementById("myChart");

var myBarChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    datasets: [{
      data: datas_1,
      backgroundColor: colorHex_1,
      borderWidth: 0,
      barPercentage: 1,
    }],
    labels: labels_1,
  },
  options: {
    responsive: true,
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        display: false,
      }],
      yAxes: [{
        gridLines: {
          display: false,
        },
        maxBarThickness: 20,
      }]
    }
  }
});

希望能帮到你

© www.soinside.com 2019 - 2024. All rights reserved.