Question

我正在使用ChartJS处理图表，我有一个问题需要解决。

在底部，X轴的标签都是重叠的，我不知道如何摆脱它。我希望它尽可能多地显示而不重叠。我也希望它具有响应性，所以如果我调整它，它会添加或删除标签数量以满足我的期望。

提前感谢您的帮助！

$(function() {

  //get the line chart canvas
  var ctx = $("#line-chartcanvas");

  //line chart data
  var data = {
    labels: ["match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5", "match1", "match2", "match3", "match4", "match5"],
    datasets: [{
        label: "TeamA Score",
        data: [10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40, 10, 50, 25, 70, 40],
        backgroundColor: "blue",
        borderColor: "lightblue",
        fill: false,
        lineTension: 0,
        radius: 5
      },
      {
        label: "TeamB Score",
        data: [20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50, 20, 35, 40, 60, 50],
        backgroundColor: "green",
        borderColor: "lightgreen",
        fill: false,
        lineTension: 0,
        radius: 5
      }
    ]
  };

  //options
  var options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "Line Graph",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: "#333",
        fontSize: 16
      }
    },
    animation: false,
    scales: {
      xAxes: [{
        display: true,
        ticks: {
          maxRotation: 90,
          minRotation: 90,
          autoSkip: false
        }
      }]
    },
    responsive: true
  };

  //create Chart class object
  var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: options
  });
});

<!-- javascript -->
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>


<div class="chart-container">
  <canvas id="line-chartcanvas"></canvas>
</div>

Answer 1

对于样本中的数据，可能无法完全理解，但针对具体问题：

    ticks: {
      maxTicksLimit: 10,
      autoSkip: true
    }

https://jsfiddle.net/microMerlin/x2o58gbe/1/

请参阅http://www.chartjs.org/docs/latest/axes/cartesian/linear.html和http://www.chartjs.org/docs/latest/axes/cartesian/#tick-configuration

Answer 2

要动态更新限制，请更改maxTicksLimit值，然后在图表上调用update。为了保持对生成的图表的访问，我使用了一个闭包，但是一个全局变量也可以工作。

请注意，xAxes是一个数组。

(function(theChart){
  $("#demo").click(function() {
    theChart.options.scales.xAxes[0].ticks.maxTicksLimit = 5;
    theChart.update();
  });
}(chart));

updated fiddle

示例正在改变点击，但同样适用于任何其他触发器。

HTML：如何摆脱重叠

2 个答案: