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

我使用Chart.js创建图表的水平条。在这一点上，我有什么是第一个图像。但我需要创建一个“BackgroundBar”百分比，但我不知道我该怎么做。有人能帮我吗？Chart.Js - 图表栏中的背景条

这是我的输出现在。

这是我想要的图表..

我的代码段是像下面..

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 
 
         } 
 
        }] 
 
       } 
 
      } 
 
     });

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

来源

2017-08-30 Jorge Filipe Pinto

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

DEMO

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。

来源

2017-08-30 12:02:23

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

回答

相关问题