スタイルXとY軸（目盛り）とChart.js？

Question

Chart.jsを使ってX軸とY軸の両方のスタイルを変更しようとしていますが、幅を変更できましたが、何らかの理由で背景色を変更できず、ドキュメントに何もありません（http://www.chartjs.org/docs/ ）それは助けになるかもしれません。私はzeroLineColorを使用してX軸の背景を変更することができましたが、データセットは、私はスタイルのグリッド線にしようとしていないよゼロ

ノートで始まりますが、場合にのみ機能している実際の行（私が間違っていない場合、ラベルとして以前知られていた）ダニの隣に。

私の現在のマークアップは次のようになります。

<canvas id="applauseChart" width="405" height="405"></canvas> 

とチャートを生成するコードは次のようになります。私は、ドキュメントで何かが欠けていますように私は感じ

Chart.defaults.global.legend = { 
    display: false, 
    labels: { 
    fontFamily: "'Open Sans', sans-serif", 
    fontSize: 12, 
    fontStyle: "bold", 
    fontColor: "#545454" 
    } 
}; 

var ctx = $("#applauseChart"); 

var data = { 
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], 
    datasets: [ 
    { 
     label: "Applauses", 
     fill: false, 
     lineTension: 0, 
     backgroundColor: "transparent", 
     borderColor: "#FE8C85", 
     borderWidth: 10, 
     borderCapStyle: 'butt', 
     borderDash: [], 
     borderDashOffset: 0, 
     borderJoinStyle: 'miter', 
     pointBorderColor: "#FE8C85", 
     pointBackgroundColor: "#FE8C85", 
     pointBorderWidth: 10, 
     pointHoverRadius: 0, 
     pointHoverBackgroundColor: "transparent", 
     pointHoverBorderColor: "#FE8C85", 
     pointHoverBorderWidth: 10, 
     pointRadius: 0, 
     pointHitRadius: 10, 
     data: [0, 100, 200, 250, 150, 200, 250, 150, 100, 200, 250, 300] 
    } 
    ] 
}; 

var options = { 
    responsive: true, 
    maintainAspectRatio: false, 
    scaleStartValue: 0, 
    scaleStepWidth: 50, 
    defaultFontFamily : "'Open Sans', sans-serif", 
    defaultFontSize : 12, 
    defaultFontStyle : "bold", 
    defaultFontColor : "#545454", 
    scales: { 
    xAxes: [{ 
     gridLines: { 
     display: false, 
     color: "#CCC8BC", 
     lineWidth: 3, 
     zeroLineWidth: 3, 
     zeroLineColor: "#2C292E", 
     drawTicks: true, 
     tickMarkLength: 3 
     }, 
     ticks: { 
     fontFamily: "'Open Sans', sans-serif", 
     fontSize: 12, 
     fontStyle: "bold", 
     fontColor: "#545454" 
     } 
    }], 
    yAxes: [{ 
     gridLines: { 
     display: true, 
     color: "#CCC8BC", 
     lineWidth: 3, 
     zeroLineWidth: 3, 
     zeroLineColor: "#2C292E", 
     drawTicks: true, 
     tickMarkLength: 3 
     }, 
     ticks: { 
     fontFamily: "'Open Sans', sans-serif", 
     fontSize: 12, 
     fontStyle: "bold", 
     fontColor: "#545454", 
     } 
    }] 
    } 
}; 

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

。私が達成しようとしていることをする方法はありますか？

Answer 1

Chart.js v2.1のを使用すると、この

---

プレビュー

---

スクリプト

を行うためのプラグインを書くことができます

、その後

... 
options: { 
    scales: { 
     xAxes: [{ 
     color: 'blue', 
     ... 
     }], 
     yAxes: [{ 
     color: 'blue', 
     ... 
     }] 
    } 
... 

---

フィドル - http://jsfiddle.net/zfsc2wuc/