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

【问题标题】：Chart js: how can I align the legend and the titleChart js：如何对齐图例和标题
【发布时间】：2019-01-28 06:35:53
【问题描述】：

我想将订单向左对齐，图例居中对齐。我试过做

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

但textalign 似乎对我和horizontal 都不起作用

【问题讨论】：

标签： charts chart.js

【解决方案1】：

查看 Chart.js 文档，没有类似 titleAlign 的选项，请参阅：https://www.chartjs.org/docs/latest/configuration/title.html。应该在将来，有一个拉取请求： https://github.com/chartjs/Chart.js/pull/5866.

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

<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>

【讨论】：

【解决方案2】：

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

<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>

【讨论】：