Question

我在可调整大小的div中有一张Highcharts Chart。有没有办法让Y轴标题响应？

尝试使用此弹药：http://plnkr.co/edit/3DXRlGkBlGoRdwxjP1rG?p=preview

我使用过这些选项，但标题的宽度（旋转时的高度）似乎根本没有变化：

chart: {
  reflow: true
},
yAxis: [{
  title: {
    text: "Really really long Y-Axis Title. aaaaaa aaaaaa aaaaaaa aaaaaa aaaaa",
    style: {
      width: "100%",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis"
    }
  }
}]

};

Answer 1

我说这是一种奇怪的行为，我希望所有部分都要重新评估。但由于生成的图形是一个SVG，我想在回流中会遗忘一些元素。在调整包含div的大小后，您可以强制重新计算空格和大小：

$("#outer").height(498).width(498);
c0.yAxis[0].setTitle({ 
    text: 'Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll',
    style: {
        width: $('#outer').height()-100,
        whiteSpace: "nowrap",
        textOverflow: "ellipsis"
    }}, true);
c0.reflow();

Answer 2

您可以使用responsive.rules根据图表的高度设置文字的宽度。

使用下面的选项，如果图表的高度低于100%，则文本的宽度为300，否则为400%。

yAxis: [{
  title: {
    text: "Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll",
    style: {
      width: "400%",
      whiteSpace: "nowrap",
      textOverflow: "ellipsis"
    }

  }
}],
responsive: {
  rules: [{
    condition: {
      maxHeight: 300
    },
    chartOptions: {
      yAxis: {
        title: {
        style: {
           width: '100%'
        }
        }
      }
    }
  }]
},

示例：http://plnkr.co/edit/h852BIAdPo3lCIesFmBT?p=preview

在Highcharts 5中添加了响应规则，因此如果您想使用旧版本，@ FlorianHeer会回答这项工作。

Answer 3

您可以在首次加载图表时设置文本的宽度，然后在调整大小时再次设置宽度。

chart: {
  events: {
    load: function () {
      this.yAxis.map((axis) => {
        axis.update({
          title: {
            style: {
              width: this.plotHeight
            }
          }
        });
      });
    }
  }
}

plotHeight是图表绘图区域的高度，我用它作为轴标题的最大宽度。

如果您使用的是5.0.7+版本，则可以使用render event，它会在图表加载和每次重绘时触发。我仍然使用版本4.x所以我不得不将load事件与我自己的另一个事件一起使用（在我的例子中，是由jQuery点击触发的事件）

如果您需要省略号，可以使用plugin扩展Highcharts，通过挂钩buildText原型上的SvgRenderer函数来更新标题后的文本值：

(function (H) {

  H.wrap(H.SVGRenderer.prototype, 'buildText', customBuildTextFunc);

  function customBuildTextFunc(proceed, wrapper) {

    // original function
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var yAxisClass = 'highcharts-yaxis-title';

    var isYAxisTitle = wrapper.textStr 
      && wrapper.element 
      && wrapper.element.classList 
      && wrapper.element.classList[0] === yAxisClass;

    if (isYAxisTitle) {

      var $container = $('<div></div>').append(wrapper.element.innerHTML);

      var $tspans = $container.find('tspan');

      var $first = $tspans.eq(0);

      $first.append('...');

      $container.empty().append($first);

      wrapper.element.innerHTML = $container.html();
    }
  }

}(Highcharts));

当我使用正确的省略号（...）时，我遇到getSVG()的问题，所以我只使用了三个句号（我的省略号被渲染成一个盒子......错误的编码或其他东西，我猜）。

如何在图表中动态截断Y轴标题在Highcharts中调整大小/重新流动

3 个答案: