Question

chart.js支持此（https://github.com/chartjs/Chart.js/pull/5262）浮动条

所以我尝试了，但是没有得到结果。这是我的代码示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
  <div class = "container">
    <canvas id="myChart3"></canvas>
  </div>
</body>
<script>
let myChart3 = document.getElementById('myChart3').getContext('2d');
let massPopChart3 = new Chart(myChart3, {
type:'bar',
data:{
  labels:[1,2],
  datasets:[{
    label:'data1',
    data:[[2,10],[3,2]],
    backgroundColor:'rgba(255,99,132, 0.6)'
  }]
},
options: {
  responsive: true,
  legend: {
    position: 'top',
  },
  title: {
    display: true,
    text: 'Chart.js Bar Chart'
    }
  }
})
</script>

以下是chartjs提供的工作示例 http://pravopys.net/chartjs/samples/charts/bar/vertical.html

Answer 1

Floating bars可用于Chart.js v2.9.0。

<html>
<head>
    <title>Floating Bars</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div>
        <canvas id="canvas" height="120"></canvas>
    </div>
    <script>         
      window.onload = function() {
         var ctx = document.getElementById('canvas').getContext('2d');
         window.myBar = new Chart(ctx, {
            type: 'bar',
            data:{
               labels:[1,2, 3, 4],
               datasets:[{
                 label:'data1',
                 data:[[-3, 5], [2,10],[2, 3], [4, 8]],
                 backgroundColor:'rgba(255,99,132, 0.6)'
               }]
            },
            options: {
               responsive: true,
               legend: {
                 position: 'top',
               },
               title: {
                 display: true,
                 text: 'Chart.js Bar Chart'
               }
            }
         });
      };
    </script>
</body>
</html>

使用chart.js制作浮动条形图的麻烦

1 个答案: