javascript - 在canvasjs中使标签索引多行

Question

我正在使用canvasjs库以生成列数据。

我有一个 for 迭代，在数组中添加一些数据:

dp.push({
      indexLabel: json[i].count + " (" + json[i].sizeText + ")",
      y: json[i].count,
      label: json[i].day.split(' ').slice(0,1),
      day: json[i].day.split(' ')[0],
      month: m,
      indexLabelFontColor: 'red',
      indexLabelBackgroundColor: 'white',
      count: json[i].count
});

我有一些长索引标签，例如:10 (50 GB)，我想放入两行，例如:

  10
(50 GB)

可以用该库实现吗？我尝试使用 indexLabelWrap 和 indexLabelMaxWidth 但由于宽度限制，( 未正确放置。

Answer 1

到目前为止，还无法像在 DOM 中那样对文本进行换行。但是，您可以添加自定义 HTML DOM 作为 indexLabel 并在任何您想要的地方断开单词。这是一个例子。

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
      text: "Position DOM as IndexLabel"
  },
  data: [{
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 }
      ]
  }]
});

chart.render();

var indexLabels = [];
addIndexLabels(chart);

function addIndexLabels(chart){
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){
      indexLabels.push(document.createElement("p"));
      indexLabels[i].setAttribute("id", "indexlabel");
      indexLabels[i].setAttribute("align", "center");
      indexLabels[i].innerHTML = chart.data[0].dataPoints[i].y + "<br/>(55 GB)";
      document.getElementById("chartContainer").appendChild(indexLabels[i]);
  }
  positionIndexLabels(chart);
}

function positionIndexLabels(chart){
		for(var i = 0; i < indexLabels.length; i++){
				indexLabels[i].style.top = chart.axisY[0].convertValueToPixel(chart.data[0].dataPoints[i].y) - (indexLabels[i].clientHeight)  + "px";
      	indexLabels[i].style.left = chart.axisX[0].convertValueToPixel(chart.data[0].dataPoints[i].x) - (indexLabels[i].offsetWidth / 3) + "px";
  	}
}

window.onresize = function(event) {
    positionIndexLabels(chart)
}

#indexlabel {
  color: black;
  position: absolute;
  font-size: 16px;
}

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>

看看this jsfiddle .