Question

我使用Chart.js创建图表的水平条。此时我所拥有的是第一张图片。但我需要创建一个＆＃34; BackgroundBar＆＃34;百分比，但我不知道如何做到这一点。有人能帮助我吗？

这是我现在的输出。

这是我想要的图表..

我的代码段如下所示..

＆＃13;

var bar_ctx = document.getElementById('bar-chart').getContext('2d');

        var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
        purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
        purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
        purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
        purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
        purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');

        var bar_chart = new Chart(bar_ctx, {
            type: 'horizontalBar',
            data: {
                labels: ["Red", "Blue"],
                datasets: [{
                    label: '# of Votes',
                    data: [12, 19],
                    backgroundColor: purple_orange_gradient,
                    hoverBackgroundColor: purple_orange_gradient,
                    borderWidth: 0
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        categorySpacing: 0,
                        barThickness: 20
                    }],
                    xAxes: [{
                        ticks: {
                            beginAtZero: true
                            //max:100
                        }
                    }]
                }
            }
        });

＆＃13;

<canvas id="bar-chart" width="300" height="125"></canvas>

＆＃13;

Answer 1

这可以使用名为 - chartjs-plugin-annotation的ChartJS插件来实现。

<强>样本

var bar_ctx = document.getElementById('bar-chart').getContext('2d');

var purple_orange_gradient = bar_ctx.createLinearGradient(0, 0, 250, 0);
purple_orange_gradient.addColorStop(0.0, 'rgb(237, 28, 36)');
purple_orange_gradient.addColorStop(0.25, 'rgb(228, 81, 173)');
purple_orange_gradient.addColorStop(0.5, 'rgb(194, 112, 215)');
purple_orange_gradient.addColorStop(0.75, 'rgb(158, 143, 239)');
purple_orange_gradient.addColorStop(1.0, 'rgb(106, 159, 247)');

var bar_chart = new Chart(bar_ctx, {
   type: 'horizontalBar',
   data: {
      labels: ["Red", "Blue"],
      datasets: [{
         label: '# of Votes',
         data: [12, 19],
         backgroundColor: purple_orange_gradient,
         hoverBackgroundColor: purple_orange_gradient,
         borderWidth: 0
      }]
   },
   options: {
      scales: {
         yAxes: [{
            categorySpacing: 0,
            barThickness: 20
         }],
         xAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      },
      annotation: {
         annotations: [{
            type: 'box',
            drawTime: 'beforeDatasetsDraw',
            id: 'bg-bar-1',
            xScaleID: 'x-axis-0',
            xMin: 0,
            xMax: 10,
            backgroundColor: '#7f7f7f',
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.min.js"></script>
<canvas id="bar-chart" width="300" height="125"></canvas>

要详细了解此插件及的用例，请参阅here。

Chart.Js - 图表栏中的背景栏

1 个答案: