图表js中带有注释插件和类别轴的垂直线？

Question

我有一个图表使用chart.js .. 问题是垂直线不适用于类别轴，即年标签[年0，年1，年2，年3 ..]。

  

下面是带有注释的工作图表示例   水平线。

var lines = [{
            type: 'line',
            mode: 'horizontal' ,/*set vertical for vertical line */
            scaleID: 'y-axis-label', /* id of the axis */
            value:  50,
            borderColor: '#E35500',
            borderWidth: 3
        }];

        var config = {
  type: 'bar',

  data: {
  labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
 //   labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
    datasets: [{
      type: 'line',
      label: 'Cost',
      data: [35, 15, 25, 14, 10, 7],
      borderColor: '#E35500',
      fill: false,
        lineTension : 0,
   borderJoinStyle: 'miter',
    }, {
      type: 'line',
      label: 'Cash Flow',
      data: [-50, 180, 170, 220, 160, 190],
      borderColor: '#FFC000',
      fill: false,
        lineTension : 0,
       
      

       
    },
           {
      type: 'bar',
      label: 'Benifit(One time)',
      backgroundColor: "#005998",
      data: [0,50, 60, 80, 50, 60],
    }, {
      type: 'bar',
      label: 'Benifit(Recurring)',
      backgroundColor: "#0FAAFF",
      data: [0,150, 150, 180, 120, 140],
    }],
      lineAtIndex: 2
  },
  options: {
      title: {
            display: true,
            text: 'Cash Flow Analysis and Breakdown'
        },
     
                    annotation: {
                        drawTime: "afterDraw",
                        annotations: lines
                    },
      
    scales: {
        
      xAxes: [{
         
          
          stacked : true,
      beginAtZero: true,
          barPercentage: 0.3,
          id : 'x-axis-label',
       position:'bottom',
          scaleStartValue: 20,
          labelString: 'Year',
          gridLines: {
                    display:false
                },
          
          
      }],
      yAxes: [{
            
            stacked : true,
 id : 'y-axis-label',
          ticks: {
                    max: 300,
                    min: -50,
                    stepSize: 50,
              
                },
          position:'left',
          gridLines: {
                    display:false
                },
      }]
    },
      legend : {
      position: 'right',
          labels:{
        boxWidth:20,
              
             
    }
      },
      maintainAspectRatio: false,
      scaleBeginAtZero: true
      
      
  }
};
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            new Chart(ctx, config);
         
        };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
        <canvas id="canvas"></canvas>
    </div>

  

以下是带有注释插件的不工作图表的示例   垂直线。

var lines = [{
            type: 'line',
            mode: 'vertical' ,/*set vertical for vertical line */
            scaleID: 'x-axis-label', /* id of the axis */
            value:  50,
            borderColor: '#E35500',
            borderWidth: 3
        }];

        var config = {
  type: 'bar',

  data: {
  labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
 //   labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
    datasets: [{
      type: 'line',
      label: 'Cost',
      data: [35, 15, 25, 14, 10, 7],
      borderColor: '#E35500',
      fill: false,
        lineTension : 0,
   borderJoinStyle: 'miter',
    }, {
      type: 'line',
      label: 'Cash Flow',
      data: [-50, 180, 170, 220, 160, 190],
      borderColor: '#FFC000',
      fill: false,
        lineTension : 0,
       
      

       
    },
           {
      type: 'bar',
      label: 'Benifit(One time)',
      backgroundColor: "#005998",
      data: [0,50, 60, 80, 50, 60],
    }, {
      type: 'bar',
      label: 'Benifit(Recurring)',
      backgroundColor: "#0FAAFF",
      data: [0,150, 150, 180, 120, 140],
    }],
      lineAtIndex: 2
  },
  options: {
      title: {
            display: true,
            text: 'Cash Flow Analysis and Breakdown'
        },
     
                    annotation: {
                        drawTime: "afterDraw",
                        annotations: lines
                    },
      
    scales: {
        
      xAxes: [{
         
          
          stacked : true,
     
          barPercentage: 0.3,
          id : 'x-axis-label',
       position:'bottom',
     
          
          
      }],
      yAxes: [{
            
            stacked : true,
 id : 'y-axis-label',
         
          
      }]
    },
      legend : {
      position: 'right',
          labels:{
        boxWidth:20,
              
             
    }
      },
      maintainAspectRatio: false,
      scaleBeginAtZero: true
      
      
  }
};
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            new Chart(ctx, config);
         
        };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
        <canvas id="canvas"></canvas>
    </div>

如何制作像4.5年一样的垂直线？

提前致谢。

Answer 1

Chart.js的注释并不是最好的，并且它们尤其与类别比例相关（似乎线性比例是他们唯一可靠的比例）。然而，有一种解决方法。

不是将标签直接放入图表中，而是将索引数组作为标签，然后添加回调方法以使用这些索引值格式化标记。

不幸的是，对于类别比例，除了一个刻度标签之外没有办法指定任何东西，所以4.5不起作用，只有4或5.如果你想要4.5，那么你需要有一个线性刻度然后应用类似的技术，因为我已经向您展示了它。

我已编辑了您的代码段以显示我的意思。

编辑：我编辑了代码片段，以展示如何使用线性比例实现这一目标。您必须在数据集数据中指定x和y值。为简洁起见，我只编辑了一个数据集。

＆＃13;

＆＃13;

var lines = [{
            type: 'line',
            mode: 'vertical' ,/*set vertical for vertical line */
            scaleID: 'x-axis-label', /* id of the axis */
            value:  4.5,
            borderColor: '#E35500',
            borderWidth: 3
        }];

var labels = ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"];

        var config = {
  type: 'bar',

  data: {
    datasets: [{
      type: 'line',
      label: 'Cost',
      data: [{x:0, y:35}, {x:1,y:15}, {x: 2, y:25}, {x:3, y:35}, {x:4,y:15}, {x: 5, y:25}],
      borderColor: '#E35500',
      fill: false,
        lineTension : 0,
   borderJoinStyle: 'miter',
    }],
      lineAtIndex: 2
  },
  options: {
      title: {
            display: true,
            text: 'Cash Flow Analysis and Breakdown'
        },
     
                    annotation: {
                        drawTime: "afterDraw",
                        annotations: lines
                    },
      
    scales: {
        
      xAxes: [{
         
          
          stacked : true,
     
          barPercentage: 0.3,
          id : 'x-axis-label',
          position:'bottom',
          type: 'linear',
          ticks: {
            callback: (index) => {
              return labels[index];
            }
          }     
      }],
      yAxes: [{
            
            stacked : true,
 id : 'y-axis-label',
         
          
      }]
    },
      legend : {
      position: 'right',
          labels:{
        boxWidth:20,
              
             
    }
      },
      maintainAspectRatio: false,
      scaleBeginAtZero: true
      
      
  }
};
        window.onload = function() {
            var ctx = document.getElementById("canvas").getContext("2d");
            new Chart(ctx, config);
         
        };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
        <canvas id="canvas"></canvas>
    </div>

＆＃13;

＆＃13;

＆＃13;