javascript - Chart Js 更改 Ox 轴上的文本标签方向

Question

我正在使用 chartJS 库 - http://www.chartjs.org/

如果文字标签过大，chartJs 45度显示文字 例如，请告诉我如何将文本旋转更改为 30 度。

请看以下内容:

    var data = {   labels:['Large Text Very Large','Text1','Text2'],
                 datasets:[ { label:'DS1',
                              fillColor:'rgba(228,218,86,0.5)',  
                             strokeColor:'rgba(228,218,86,0.8)',
                              highlightFill:'rgba(228,218,86,0.75)',
                              highlightStroke: 'rgba(228,218,86,1)', data:[0,1,0]
                            }
                 ]
           }


    var options = {
        animation: false
    };

    //Get the context of the canvas element we want to select
    var c = $('#myChart');
    var ct = c.get(0).getContext('2d');
    var ctx = document.getElementById("myChart").getContext("2d");
    /*************************************************************************/
    myNewChart = new Chart(ct).Bar(data, options);

同样在 jsfiddle 上:

http://jsfiddle.net/cvL9fk2t/

谢谢!

Answer 1

如果您使用的是 chart.js 2.x，只需在刻度选项中设置 ma​​xRotation: 90 和 minRotation: 90。这个对我有用! 如果您想要所有 x 标签，您可能需要设置 autoSkip: false。 下面是一个例子。

var myChart = new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    scales: {
      xAxes: [{
        ticks: {
          autoSkip: false,
          maxRotation: 90,
          minRotation: 90
        }
      }]
    }
  }
});