Chartjs标题和轴标签适合

时间:2018-10-11 13:02:33

标签: chart.js chartjs-2.6.0

我在这里有条形图https://jsfiddle.net/2fuL5x7b/ 我对这三个感到有些困惑。请帮助

1。图表标题文字左对齐(而不是左对齐)

2。 x轴标签以自动调整,就像最后一个类别一样,不应超出条形数据区域(因此可以是3行,中心文本对齐)。 enter image description here   3。需要字幕位于底部的图例下方,文本左对齐

请参阅jsfiddle上的完整代码,谢谢

    var options = {
  type: 'bar',

  data: {
    labels: ["Leadership","Traning","Incentivisation","Office environment","Education",
                            "Employment legislation and regluation"],
    datasets: [
        {
          label: '2018',
          data: [0.6,0.5,0.47,0.42,0.35,0.29
        ],
        backgroundColor: '#182540',
        borderColor: '#182540',
        borderWidth: 1
        },  

            {
                label: '2016',
                data: [0.65,0.5,0.55,0.49,0.41,0.32
        ],
        backgroundColor: '#0073CF',
        borderColor: '#0073CF',
                borderWidth: 1
            }
        ]
  },
  options: {
          title: {
            display: true,
            text: 'chart title',
            padding:25,
            fontSize: 15,
            fontFamily: 'Noto Serif',
            x:0
            },
           legend: {
            display: true,
            position: 'bottom',
            labels: {
                fontColor: '#182540'

            }
        },
         plugins: {
          datalabels: {
                             formatter: (value, ctx) => {
                                  let percentage = (value*100).toFixed(0)+"%";
                          return percentage;          
                                    },
                            anchor: 'end',
                              align: 'end',
                              color: '#888'
                         }
              },
        scales: {
            yAxes: [{
               ticks: {
              suggestedMin: 0,
              suggestedMax:1,
                            reverse: false,
                callback: function(value, index, values) {
                        return (value*100) +"%";
                     }
               }
              }],
           xAxes: [{
                type: 'category',

                ticks: {
                    maxRotation: 0,
                  autoSkip: false,
                  maxTicksLimit: 20

                }


            }]
            }
  }

}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

0 个答案:

没有答案