Question

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

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

但是textalign似乎对我也不起作用，horizontal

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

Answer 2

您还可以将下面的代码放在图表脚本的末尾，然后在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>

图表JS：如何对齐图例和标题

2 个答案: