noData messsage不会在窗口调整大小时自动换行

时间:2015-12-29 04:07:13

标签: highcharts

在高级图表上显示长noData条消息时,文字不会换行并且不在屏幕/图表之外。

DEMO:http://jsfiddle.net/9xLyo7xj/

lang:{noData:'this is a really long sentence that is supposed to wrap around the window but somehow it is not - I would like it to wrap for easier reading'}

HTML

<button id="add">Add data</button>
<button id="remove">Remove data</button>
<button id="showCustom">Show custom message manually</button>

JS

$(function() {
  var chart,
    btnRemove = $('#remove'),
    btnAdd = $('#add'),
    btnShow = $('#showCustom');

  btnAdd.click(function() {
    chart.series[0].addPoint(Math.floor(Math.random() * 10 + 1)); // Return random integer between 1 and 10.
  });

  btnRemove.click(function() {
    if (chart.series[0].points[0]) {
      chart.series[0].points[0].remove();
    }
  });

  btnShow.click(function() {
    if (!chart.hasData()) {
      chart.hideNoData();
      chart.showNoData("Your custom error message");
    }
  });

  $('#container').highcharts({
    title: {
      text: 'No data in line chart - with custom options'
    },
    series: [{
      type: 'line',
      name: 'Random data',
      data: []
    }],
    lang: {
      noData: "this is a really long sentence that is supposed to wrap around the window but somehow it is not - I would like it to wrap for easier reading"
    },
    noData: {
      style: {
        fontWeight: 'bold',
        fontSize: '15px',
        color: '#303030',
        width: 400px
      }
    }
  });

  chart = $('#container').highcharts();
});

0 个答案:

没有答案