Question

（↑这不是我的问题＆＃39;答案!! :(）

嗨〜我使用chartJS绘制折线图。

    var areaChartData = {
      labels: ["2016-02-11_19:59:24", "2016-02-11_20:59:24", "2016-02-12_21:59:24", "2016-02-21_22:59:24", "2016-02-21_23:59:24", "2016-02-22_19:59:24", "2016-02-22_23:59:24", "2016-02-23_23:59:24", "2016-02-24_23:59:24", "2016-02-25_23:59:24"],
      datasets: [
        {
          label: "Elec",
          fillColor: "rgba(210, 214, 222, 1)",
          strokeColor: "rgba(210, 214, 222, 1)",
          pointColor: "rgba(210, 214, 222, 1)",
          pointStrokeColor: "#c1c7d1",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40, 23, 22, 21]
        },
        {
          label: "Goods",
          fillColor: "rgba(60,141,188,0.9)",
          strokeColor: "rgba(60,141,188,0.8)",
          pointColor: "#3b8bba",
          pointStrokeColor: "rgba(60,141,188,1)",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(60,141,188,1)",
          data: [28, 48, 40, 19, 86, 27, 90, 23, 22, 21]
        }
      ]
    };

我无法在图表中显示标签，因为标签太长而无法显示。我想在轴标签中将标签更改为多行标签

2016-02-11_19：59：24个

到

2016-02-11
19:59:24

如何更改选项或Char.js脚本？

http://jsfiddle.net/TZq6q/242/
http://jsfiddle.net/zruvru23/1/

Answer 1

根据官方sample repo，您应将单行放入另一个数组：

data: {
    labels: [['June', '2015'], 'July', '...', ['January', '2016'], 'February', '...'],
    // Rest of config

在这种情况下，June 2015和January 2016在年份中将有一个新行，其余标签将不被包装。

该示例来自折线图，我也使用条形图对其进行了测试，但它适用于所有图表类型。

使用ChartsJS 2.7.2版进行测试

Answer 2

将标签定义更改为：

 labels: [["2016-02-11", "19:59:24"], ["2016-02-11","20:59:24"]]

Answer 3

您可以将长标签名称更改为数组，chartjs会将每个元素拆分为一行，此示例对我有用：

Error when executing success post condition:
hudson.AbortException: No item named A/master found

但是，在这种情况下，当您将鼠标移到图表上方时，显示的工具提示将以逗号分隔每行，在我的情况下，['Park'，'Assist']会在工具提示上显示为“ Park， Assis”。要解决此问题，您必须在工具提示回调中使用空格删除逗号，例如：

labels: ['DAB', ['Park', 'Assist'], ['Lane', 'Assist'], ['Smartphone', 'Interface'], 'GPS', 'LED']

将长标签更改为ChartJs中的多行（换行）标签

3 个答案: