javascript - Chartjs v2 xAxes 标签与 scaleLabel 重叠

Question

图表 js v2 重叠有没有办法将 scaleLabel 的 labelString 进一步向下移动，使其不重叠。请查看标有黄色和红色部分的屏幕截图。

部分代码如下

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

Answer 1

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

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

The legend is part of the default options of the ChartJs library. So you do not need to explicitly add it as an option.

The library generates the HTML. It is merely a matter of adding that to the your page. For example, add it to the innerHTML of a given DIV. (Edit the default options if you are editing the colors, etc)

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

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

You'll also need to add some basic css to get it looking ok.

//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();

然后使用 css 设置您喜欢的图例格式(包括在图表中的图例之间添加间距)