Question

我正在努力使我的highcharts圆环图的标题响应 - 这是我现在的jsFiddle： https://jsfiddle.net/klstack3/43Lqzznt/2/

HTML

<div class="wrapper">
<div id="container" style="width:100%;height:100%;"></div>

CSS

.highcharts-title {
font-weight: bold;

的Javascript

$(function () {
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
   },
    title: {
        text: "I want this to be responsive",
                    margin: 10,
        align: 'center',
        verticalAlign: 'middle',

    },
    tooltip: {
        pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',

        }
    },
    series: [{
        type: 'pie',
                    data: [{
        name: 'Item',
        y: 81.52,
        sliced: true,
        selected: true
    }, {
        name: 'Item',
        y: 2.91,
    }, {
        name: 'Item',
        y: 4.07
    }, {
        name: 'Item',
        y: 2.07
    }, {
        name: 'Item',
        y: 9.44
    }],
    innerSize: '50%',
    }]
});

$(window).resize(function(){
    var chart = $('#container').highcharts();

    console.log('redraw');
    var w = $('#container').closest(".wrapper").width()
    // setsize will trigger the graph redraw 
    chart.setSize(       
        w,w * (3/4),false
    );
 });

图表会随浏览器调整大小但我无法获得相同的标题 - 它只是重叠图表。任何帮助将不胜感激！

Answer 1

您可以按照与处理整个图表相同的方式处理标题 - 在window.resize()上设置其大小。我将所有负责调整大小的代码移动到doResize函数，以便在最初呈现图表后立即调用它（没有窗口调整大小事件，需要显式调用）：

  function doResize() {
    var chart = $('#container').highcharts();

    var w = $('#container').closest(".wrapper").width()
      // setsize will trigger the graph redraw 

    console.log('redraw');
    chart.setSize(
      w, w * (3 / 4), false
    );

    chart.title.update({
      style: {
        fontSize: Math.round(chart.containerWidth / 30) + "px"
      }
    });
  };

  $(window).resize(doResize);
  doResize();

现场演示： https://jsfiddle.net/kkulig/jksp88p1/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#.title

如何在Highcharts中制作响应标题？

1 个答案: