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

在canvasjs中制作标签索引多行

Make label index multiline in canvasjs

javascript

canvasjs