Javascript 在ChartJs中将长标签更改为多行(换行)标签

Javascript 在ChartJs中将长标签更改为多行(换行)标签,javascript,jquery,web,chart.js,Javascript,Jquery,Web,Chart.js,(↑ 这根本不是我问题的答案!!:() 嗨~我在用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_

(↑ 这根本不是我问题的答案!!:()

嗨~我在用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脚本



将标签定义更改为:

 labels: [["2016-02-11", "19:59:24"], ["2016-02-11","20:59:24"]]
根据这位官员的说法,你应该将单行线放入另一个数组中:

数据:{
标签:['June'、'2015']、'July'、'…'、['June'、'2016']、'June'、'June'、'July'、'July'、'…'、['June'、'2016']、'June'、'June'、'July'、'…],
//配置的其余部分
在这种情况下,
2015年6月
2016年1月
将有一个新的年度行,其余标签将不会被包装

这个例子来自一个折线图,我也用一个条形图测试了它,但是它应该适用于所有的图表类型


使用ChartsJS的2.7.2版进行测试

您可以将长标签名称更改为数组,chartjs将每个元素拆分为一行,这个示例对我很有用:

labels: ['DAB', ['Park', 'Assist'], ['Lane', 'Assist'], ['Smartphone', 'Interface'], 'GPS', 'LED']
但是,在这种情况下,当您将鼠标移到图表上时,显示的工具提示将用逗号分隔每一行,在我的情况下,['Park','Assist']将在工具提示上显示为“Park,Assis”。要解决此问题,您必须在工具提示回调中用空格删除逗号,如下所示:

tooltips: {
  enabled: true,
  callbacks: {

    title: function(tooltipItem, data) {
      return data.labels[tooltipItem.index];
    },
    label: function(tooltipItem, data) {
      let dataval = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      let dslabels = data.labels[tooltipItem.index];

      // Remove the comma

      dslabels = dslabels.toString().replace(",", " ");

      return ' ' + dslabels + ' : ' + dataval + '%';
    }
  }
},

您的html不在此处,因此无法预测如何断开它,但请尝试使用“2016-02-11 19:59:24”这样的标签。用空格断开它。空格可能会将其断开为多行。当我将“u”更改为“”时,结果是一样的。因为标签太长,无法显示。我必须显示小时和分钟,所以我想找出表达式的多行标签。您可以创建或其他任何东西,以便我可以查看您的原始图形吗?您可以在中显示示例。我的问题是长标签到多行标签的表达式方法。@Bethlee-抱歉。我完全忽略了你想要包装轴标签而不是工具提示这一事实。关于jsfiddle.net/qw0Lw03s(改编自stackoverflow.com/a/31699438/360067-它代表角度,但你应该能够复制扩展位,它可以在没有角度的情况下工作)对我不起作用。结果是“2016-02-11,19:59:24”-没有包装。