Question

我创建了一个带有Highcharts的条形图并使用bootstrap将其存储在col-md-12列中，我将此图表的宽度设置为100％，但它的宽度甚至超过了col-md-12。 / p>

这是我的代码：

<div class="col-md-12">
    <div id="kanwil-report-kepuasan" style="width: 100%; min-height: 330px; margin: 0 auto"></div>
</div>

和Highcharts代码：

$('#kanwil-report-kepuasan').highcharts({
        chart: {
                type: 'column'
            },
            colors: ['#3498DB'],
            title: {
                text: 'Index Kepuasan Nasabah Berdasarkan Kanwil'
            },
            xAxis: {
                type: 'category',
                 title: {
                    text: ' '
                }
            },

            legend: {
                enabled: false
            },

            plotOptions: {
                series: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            yAxis: {
                 // tickPositioner: function() {
                 //        return [0,10];
                 //    },
                 gridLineWidth: 0,

                title: {
                    text: 'Persentase'
                }

            },
            credits:{
                enabled:false
            },

            series: [{
                name: 'Score',
                colorByPoint: true,
                data: {!! json_encode($kanwil_index_data_kepuasan,JSON_NUMERIC_CHECK) !!}   
            }]
    });

Answer 1

在高级图表文档页面http://www.highcharts.com/docs/chart-concepts/responsive

上查看此页面

但引用：

从Highcharts 5.0开始，您可以创建响应式图表   您使用响应式网页的方式。顶级选项，   响应，存在于配置中。

它允许您定义一组规则，每个规则都有一个条件   maxWidth：500，以及应用的一组单独的chartOptions   一般图表选项的顶部。 chartOptions用作覆盖   到常规图表选项，适用于规则时适用。对于   例如，以下规则将隐藏小于的图表的图例   500像素宽：

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

Answer 2

从屏幕截图中看，Highcharts图表显示在首次查看页面时可能无法显示的标签中。

Highcharts，以及一般的Javascript和jQuery，如果首先隐藏它们然后在页面加载后变得可见，则会将对象渲染到正确的宽度和高度。 Javascript等不会（可靠地）保存不可见对象的宽度和高度值，并且没有该信息会干扰Highcharts代码的原生响应。

为了让您的图表以正确的尺寸显示，我建议您在标签上添加点击事件，以便每当显示图表的标签显示时，它会捕获“当前尺寸（宽度和高度）” kanwil-report-kepuasan“div然后在当时呈现图表（不仅仅是在页面加载后）。

以下是大致如何运作：

$("#TabThatHasChart").on('click',function(e){

    /* OPTIONAL: some variables you can use in your chart options for custom sizing */
    var chartWidth = $("#kanwil-report-kepuasan").width();
    var chartHeight = $("#kanwil-report-kepuasan").height();

    /* draw the chart once the tab has been clicked and it is now visible */
    $('#kanwil-report-kepuasan').highcharts({
        /* your chart options go here */
    });

    e.stopPropagation();

});

我希望这些信息对您有所帮助。

如何制作响应式高图？

2 个答案: