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中使标签索引成为多行

1 个答案: