Chartjs实现水平堆叠的柱状图效果代码-html代码-BFW代码库

Chartjs实现水平堆叠的柱状图效果代码

代码语言：html

所属分类：图表

代码描述：Chartjs实现水平堆叠的柱状图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>
    
        .graph_container{
        
          display:block;
          width:600px;
        }
    </style>




</head>

<body>
    <div class="graph_container">
        <canvas id="Chart1"></canvas>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Chart.2.9.3.js"></script>
    <script>
        var barOptions_stacked = {
          tooltips: {
            enabled: false },
        
          hover: {
            animationDuration: 0 },
        
          scales: {
            xAxes: [{
              ticks: {
                beginAtZero: true,
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize: 11 },
        
              scaleLabel: {
                display: false },
        
              gridLines: {},
        
              stacked: true }],
        
            yAxes: [{
              gridLines: {
                display: false,
                color: "#fff",
                zeroLineColor: "#fff",
                zeroLineWidth: 0 },
        
              ticks: {
                fontFamily: "'Open Sans Bold', sans-serif",
                fontSize: 11 },
        
              stacked: true }] },
        
        
          legend: {
            display: false },
        
        
          animation: {
            onComplete: function () {
              var chartInstance = this.chart;
              var ctx = chartInstance.ctx;
              ctx.textAlign = "left";
         .........完整代码请登录后点击上方下载按钮下载查看