2014-08-27 3 views
1

Я работаю над приложением, в котором у меня есть несколько webView, и в них я визуализирую различные диаграммы, используя библиотеку javascript HighCharts. Вот часть зрения мой взгляд контроллера, в котором такой веб вид помещаетсяUIWebView отключает нижнюю часть содержимого

enter image description here

«Название страны», и все выше является частью веб-просмотра, в то время как «Легенда» находится в UILabel. Как вы можете видеть, «y» в «Country Name» обрезается внизу. Я сделал снимок прозрачным и даже установил webView.scrollView.clipsToBounds = NO, а также изменил этот вид прокрутки contentInsets, но это ничего не меняет (и я понимаю, что поворот клипов может быть неправильным, я просто проверял, есть ли проблема для чего-то сделайте с ним). (EDIT: замененные фрагменты с полным html)

Это html-шаблон, который я использую. В последнем html все «%%» заменяются только «%» и «% @» заменяются данными диаграммы.

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('#chart_container').highcharts({ 
               chart: { 
               type: '%@', 
               spacing: [10, 0, 0, 0], 
               zoomType: 'x' 
               }, 
               title: { 
               text: null 
               }, 
               xAxis: { 
               categories: %@, 
               title: { 
               text: '%@', 
               style: { 
               fontSize: '13.0px' 
               } 
               }, 
               minRange: 1, 
               labels: { 
               rotation: -45, 
               style: { 
               fontSize: '13.0px' 
               } 
               } 
               }, 
               yAxis: { 
               title: { 
               text: '%@', 
               style: { 
               fontSize: '12.0px' 
               } 
               }, 
               labels: { 
               style: { 
               fontSize: '14.0px' 
               } 
               } 
               }, 
               tooltip: { 
               shared: true, 
               headerFormat: '<span style="font-size: 18.0px">{point.key}</span><br/>', 
               %@ 
               style: { 
               fontSize: '16.0px' 
               } 
               }, 
               legend: { 
               enabled: false 
               }, 
               %@ 
               series: %@, 
               credits: { 
               enabled: false 
               }, 
               exporting: { 
               enabled: false 
               } 
               }); 
       }); 

       function toggleSeries(index) { 
        var chart = $('#chart_container').highcharts(); 
        chart.tooltip.hide(); 
        %@ 
       } 
     </script> 
     </head> 

<body style="height: 100%%; min-height: 100%%; margin:0; padding:0; overflow: visible"> 
    <script src="highcharts.js"> 
     </script> 
    <script src="exporting.js"> 
     </script> 
    <div id="chart_container" style="height: 100%%; overflow: visible"></div> 
</body> 

Любая идея, где же эта проблема придет и как она может быть исправлена?

+0

Вы могли бы показать полный код Highcharts? Вы пытались установить «chart.marginBottom» на более высокое значение, чем значение по умолчанию? –

+0

@ PawełFus Я добавил полный html к вопросу. Я попытался установить маржу на диаграмме div. – johnyu

+0

Почему у вас есть: 'height: 100 %%' - это правильно? Просто спрашиваю. Кроме того, почему вы отключили интервал: 'spacing: [10, 0, 0, 0]'? Добавьте несколько интервалов внизу, будет работать. –

ответ

1

Проблема была в создании для диаграммы:

spacing: [10, 0, 0, 0] 

После удаления этого авто-расчет расстояния предотвращает от этой проблемы.

Смежные вопросы