如何製作響應式高圖？

我創建Highcharts條形圖並將其存儲在列col-MD-12使用自舉，我設置此圖表的寬度，使得它是100％，但它的寬度甚至超過COL-MD-12。如何製作響應式高圖？

這裏是我的代碼：

<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) !!} 
      }] 
    });

來源

2017-03-09 nugrahaTeten

結帳這個頁面highcharts文檔頁面上，http://www.highcharts.com/docs/chart-concepts/responsive

但要報價：

由於Highcharts 5.0，您可以創建響應式圖表很多您使用響應式網頁的方式。在配置中存在一個頂級選項 responsive。

它允許您定義一組規則，每一個條件，例如 maxWidth：500，以及一組單獨的chartOptions被上頂部的一般圖表選項施加。該chartOptions工作的覆蓋到正規的圖表選項，當應用該規則適用。對於例如，下面的規則將隱藏小於 500像素寬的圖表圖例：

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

來源

2017-03-09 03:45:16 dzylich

從你的截圖，它看起來像Highcharts圖表出現在標籤可能不可見時該頁面首先被查看。

Highcharts和Javascript和jQuery一般具有挑戰的對象渲染到正確的寬度和高度，如果他們先隱藏，然後做在頁面加載後可見。 JavaScript等不（可靠地）保持不可見的對象的寬度和高度值，和不具有該信息與Highcharts'代碼的本機響應干擾。

爲了讓您的圖表顯示正確的尺寸，我建議在您的標籤上添加一個點擊事件，這樣，無論何時顯示圖表的標籤顯示，它都會捕獲當前尺寸（寬度和高度）的「kanwil報告-kepuasan」分區，然後呈現在那個時候（頁面已加載不單純後）圖表。

這裏是如何做到這一點大致的工作：

$("#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(); });

我希望這個信息是對你有幫助。

來源

2017-03-09 12:33:24

如何製作響應式高圖？

回答

相關問題