据我所知，您希望为每个小节生成Horizontal bar chart with random value。
这里我已经做了你想要的东西与价值的每一个酒吧内的酒吧。
由于您使用的Chart.js/2.7.2/Chart.min.js有时不起作用，因此建议您使用https://cdn.jsdelivr.net/npm/chart.js，对于datatabels plugin，请使用https://cdn.jsdelivr.net/npm/ [[email protected]](https://stackoverflow.com/cdn-cgi/l/email-protection)

// Setup
      var data = {
        labels: ['Playing', 'Not Playing'], // This is the label of the chart's Axis
        datasets: [ // datasets consists data of each label
          {
            label: 'Yes',
            backgroundColor: 'rgba(78, 136, 250, 1)',
            data: [(Math.random()  95 + 5).toFixed(2), (Math.random()  95 + 5).toFixed(2)], // for random value
            borderRadius: 14,
            barPercentage: 0.9, // Adjust this value to change the width of bars (its value is from 0 to 1)
            
            // Below datalabels are to show the values of the bars at the top-bottom wherever we wants
            datalabels: {
              color: 'white', // color of the data labels
            }
          },
          {
            label: 'No',
            backgroundColor: 'rgba(241, 156, 23, 1)',
            data: [(Math.random()  95 + 5).toFixed(2), (Math.random()  95 + 5).toFixed(2)], // for random value
            borderRadius: 14,
            barPercentage: 0.9, // Adjust this value to change the width of bars (its value is from 0 to 1)
            
            // Below datalabels are to show the values of the bars at the top-bottom wherever we wants
            datalabels: {
              color: 'royalblue', // color of the data labels
            }
          },
        ]
      };
  
      // Configuration
      var options = {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
          legend: { // legends are the labels of the graph
            position: 'top', // using position parameter we can adjust position of the legend in the chart area (Vertical)
            align: 'end', // align the legend at the end of the chart (Horizontal)
            labels: {
              boxWidth: 15,
              boxHeight: 6,
              useBorderRadius: true,
              borderRadius: 3,
              color: '#02d0d0',
              font: { 
                size: 16,
              },
              padding: 30, // spacing between the legend lables in px
            },
            onHover: function(event, legendItem) {
              document.getElementById('myChart').style.cursor = 'pointer'; // to show the cursor on hover of the legend
            },
          },
          tooltips: {
            // enabled: true,
            mode: "index",
            intersect: false,
          },

          // To Customise the data labels
          datalabels: {
            formatter: (value) => {
              return value + '%';
            },
            font: { 
              weight: 'bold',
            }
          },              
        },

        layout: {
          padding: 20,
        },

        scales: {
          y: {
            min: 0,
            max: 100,
            ticks: {
              beginAtZero: true,
              stepSize: 25,
            },
            scaleLabel: { 
              display: false,
              labelString: 'Percentage',
            },
          },
        },
      };
  
      // Create chart
      var ctx = document.getElementById('myChart').getContext('2d'); // ctx is nothing but the small for of the word "ConTeXt" and we can use any thing as this is a name of the variable.
      
      // Config
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: data, // gets the data from the var data
        options: options,
        plugins: [ChartDataLabels], // add this as it activates the datalabel plugin
      });

字符串
请参考下面的JSFiddle链接以获取演示。JSFiddle Link
希望这对你有帮助。
谢谢.