Charts Chart js：如何对齐图例和标题_Charts_Chart.js

Charts Chart js：如何对齐图例和标题

charts chart.js

Charts Chart js：如何对齐图例和标题,charts,chart.js,Charts,Chart.js,我要将顺序向左对齐，将图例居中对齐。我试过了 title:{ display:true, fontSize:18, text: "Products", titleAlign:'left' } 但是textalign似乎对我不起作用，也不适用于horizontal检查Chart.js文档，没有像titleAlign这样的选项，请参阅：。它应该是在未来，有一个拉请求：有一个选项可以这样做，您不应该显示图表标题并添加自己的标题。下面是

我要将顺序向左对齐，将图例居中对齐。我试过了

title:{
      display:true,
      fontSize:18,
      text: "Products",
      titleAlign:'left'
    }

但是

textalign

似乎对我不起作用，也不适用于

horizontal

检查Chart.js文档，没有像titleAlign这样的选项，请参阅：。它应该是在未来，有一个拉请求：

有一个选项可以这样做，您不应该显示图表标题并添加自己的标题。下面是我如何做到这一点的例子

<div class="panel panel-default">
    <div class="panel-heading">
        <h5>{{ title }}</h5>
    </div>
    <div class="panel-body">
         <canvas id="my-chart" width="150" height="150"></canvas>
    </div>
</div>


{{title}}

您也可以将下面的代码放在图表脚本的末尾，然后将图例隐藏在您的chartjs选项中。这将在div中创建一个ul元素，您可以使用类和/或id通过css操纵该元素，以实现更大的控制

<html>
    <body>
        <div id="js-legend" class="chart-legend"></div>
    </body>
    <script>

        /*-- Your chartjs code here --*/

        document.getElementById('js-legend').innerHTML = barChart.generateLegend();

    </script>
</html>


/*--您的chartjs代码在这里--*/
document.getElementById（'js-legend'）。innerHTML=barChart.generateGend（）；