Question

你好如何在这个jsfiddle的30点给出不同的颜色我也发布了我的代码我知道画布js中的带状线，但在图表js不能想出来谢谢你。 here is fiddle 。我希望在30岁时给出不同的颜色并解释答案。

var canvas = document.getElementById('myChart');

var data = {
    labels: ["D", "I", "S", "C"],
    datasets: [
        {
            label: "Оноо",
            borderWidth: 2,
            hoverBorderColor: "grey",
            data: [40, 20, 35, 25],
            backgroundColor: [
                'rgba(231, 76, 60, 0.5)',
                'rgba(247, 220, 111, 0.5)',
                'rgba(130, 224, 170, 0.5)',
                'rgba(93, 173, 226, 0.5)',

            ],
            hoverBackgroundColor:['rgba(231, 76, 60, 1)','rgba(247, 220, 111, 1)',  'rgba(130, 224, 170, 1)',   'rgba(93, 173, 226, 1)'],
            yAxes:{
            stripLines:[
            {       
                    color:'red',
              value:30,
              thickness:3
            }
            ]                    
        },
        }
    ]
};
var option = {
    scales: {
    yAxes:[{
            stacked:true,
        gridLines: {
            display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
        }
    }]
  }
};

Answer 1

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

<强>ᴅᴇᴍᴏ

var canvas = document.getElementById('myChart');

var data = {
   labels: ["D", "I", "S", "C"],
   datasets: [{
      label: "Оноо",
      borderWidth: 2,
      hoverBorderColor: "grey",
      data: [40, 20, 35, 25],
      backgroundColor: [
         'rgba(231, 76, 60, 0.5)',
         'rgba(247, 220, 111, 0.5)',
         'rgba(130, 224, 170, 0.5)',
         'rgba(93, 173, 226, 0.5)',
      ],
      hoverBackgroundColor: ['rgba(231, 76, 60, 1)', 'rgba(247, 220, 111, 1)', 'rgba(130, 224, 170, 1)', 'rgba(93, 173, 226, 1)'],
   }]
};
var option = {
   scales: {
      yAxes: [{
         stacked: true,
         gridLines: {
            display: true,
            color: "rgba(255,99,132,0.2)"
         }
      }],
      xAxes: [{
         gridLines: {
            display: false
         }
      }]
   },
   annotation: {
      annotations: [{
         type: 'line',
         drawTime: 'afterDatasetsDraw',
         id: 'strip-line-1',
         mode: 'horizontal',
         scaleID: 'y-axis-0',
         value: 30,
         borderColor: 'red',
         borderWidth: 3
      }]
   }
};


var myBarChart = new Chart(canvas, {
   type: 'bar',
   data: data,
   options: option
});

<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="myChart" width="400" height="200"></canvas>

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

图表js带状线？像一个来自画布

1 个答案: