如何把一個ChartJS圖表

Question

的Y上的方向箭頭和X軸如何添加上Y方向箭頭和ChartJS圖表的X軸。任何一個有想法的建議，無論是否可行，以及如何。

這是繪製圖表的代碼。

var ctx = $("#mycanvas"); 

     var LineGraph = new Chart(ctx, { 
      type: 'line', 
      data: chartdata}); 

燒烤

Answer 1

嘗試了這一點..不知道這是否會滿足圖和上面的代碼對你的要求或不

<canvas id="myChart" width="800" height="400"></canvas> 

Chart.types.Line.extend({ 
    name: "LineAlt", 
    draw: function() { 
     Chart.types.Line.prototype.draw.apply(this, arguments); 

     var ctx = this.chart.ctx; 
     ctx.save(); 
     // text alignment and color 
     ctx.textAlign = "center"; 
     ctx.textBaseline = "bottom"; 
     ctx.fillStyle = this.options.scaleFontColor; 
     // position 
     var x = this.scale.xScalePaddingLeft * 0.4; 
     var y = this.chart.height/2; 
     // change origin 
     ctx.translate(x, y) 
     // rotate text 
     ctx.rotate(-90 * Math.PI/180); 
     ctx.fillText(this.datasets[0].label, 0, 0); 
     ctx.restore(); 
    } 
}); 

var data = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: [65, 59, 80, 81, 56, 55, 40] 
     }, 
     { 
      label: "My Second dataset", 
      fillColor: "rgba(151,187,205,0.2)", 
      strokeColor: "rgba(151,187,205,1)", 
      pointColor: "rgba(151,187,205,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(151,187,205,1)", 
      data: [28, 48, 40, 19, 86, 27, 90] 
     } 
    ] 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
var myLineChart = new Chart(ctx).LineAlt(data, { 
    // make enough space on the right side of the graph 
    scaleLabel: "   <%=value%>" 
});