Javascript Chartjs v2 xAxes标签与scaleLabel重叠

图表js v2与重叠。是否有方法将scaleLabel的标签字符串向下移动，使其不重叠。请查看用黄色和红色部分标记的屏幕截图

部分代码如下所示

                    scales: {
                            xAxes: [{
                                display: true,
                                ticks: {
                                    autoSkip: false,
                                    autoSkipPadding: 20
                                },
                                scaleLabel: {
                                    display: true,
                                    labelString: "ProductName(ProductName)"
                                }
                            }],

---

您的问题有两种可能的解决方案：

1：这是用于折线图，但可以轻松地定制为条形图

图例是ChartJs库的默认选项的一部分。所以 您不需要显式地将其添加为选项

该库生成HTML。这只是一个补充的问题 转到您的页面。例如，将其添加到给定DIV的innerHTML中。 （如果正在编辑颜色等，请编辑默认选项）

风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
标签：“闪光灯的速度”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
},
{
标签：“超人的速度”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}
]
};
var myLineChart=新图表（document.getElementById（“chartDiv”）.getContext（“2d”））.Line（数据）；
document.getElementById（“legendDiv”）.innerHTML=myLineChart.GenerateGend（）；

2：在图表选项中添加图例模板

您还需要添加一些基本的css以使其看起来正常

//legendTemplate将模板作为字符串，您可以使用数据集中的值填充模板
变量选项={
legendTemplate:“
”
+''
+''
+“”
+''
+“
”
}
//创建新图表时，不要忘记传递选项
var lineChart=新图表（元素）.Line（数据，选项）；
//然后，您只需要生成图例
var legend=lineChart.generateLegend（）；
//并将其附加到页面的某个位置
$（'图表'）。追加（图例）；

这两个选项中的任何一个都会起作用

在您的情况下，图例代码将如下所示

（假设已生成条形图）

document.getElementById（“legendDiv”）.innerHTML=BarChart.generateGend（）；

---

然后使用css以您喜欢的方式格式化图例（包括在图表中添加图例之间的间距）

在图表下添加图例div是一个合理的解决方法。问题是关于标签字符串：“ProductName（ProductName）”不是关于图例，图例都是关于y轴的，这里的问题是关于x轴的。

<div>
    <canvas id="chartDiv" height="400" width="600"></canvas>
    <div id="legendDiv"></div>
</div>

<script>
   var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "The Flash's Speed",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "Superman's Speed",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };

    var myLineChart = new Chart(document.getElementById("chartDiv").getContext("2d")).Line(data);
    document.getElementById("legendDiv").innerHTML = myLineChart.generateLegend();
</script>

//legendTemplate takes a template as a string, you can populate the template with values from your dataset 
var options = {
  legendTemplate : '<ul>'
                  +'<% for (var i=0; i<datasets.length; i++) { %>'
                    +'<li>'
                    +'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
                    +'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
                  +'</li>'
                +'<% } %>'
              +'</ul>'
  }

  //don't forget to pass options in when creating new Chart
  var lineChart = new Chart(element).Line(data, options);

  //then you just need to generate the legend
  var legend = lineChart.generateLegend();

  //and append it to your page somewhere
  $('#chart').append(legend);

<div id="legendDiv"></div>
document.getElementById("legendDiv").innerHTML = BarChart.generateLegend();