Проблема с последней шириной столбца в Highcharts

Я получаю Highcharts после динамической загрузки данных таблицы с использованием Datatable.Проблема с последней шириной столбца в Highcharts

У меня возникла проблема с панелью в диаграмме. , пожалуйста, проверьте код ниже, как он выглядит.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/modules/data.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js"> 
     </script> 
    </head> 

    <body> 
     <div id="advertiser_chart"></div> 
     <table id="datatable"> 
      <thead> 
       <tr role="row"> 
        <th class="sorting_disabled" rowspan="1" colspan="1">Month</th> 
        <th class="sorting_disabled" rowspan="1" colspan="1">Order</th> 
        <th class="sorting_disabled" rowspan="1" colspan="1">Revenue</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr role="row" class="odd"> 
        <td>2016</td> 
        <td>3</td> 
        <td>11</td> 
       </tr> 
       <tr role="row" class="even"> 
        <td>2015</td> 
        <td>1</td> 
        <td>3</td> 
       </tr> 
       <tr role="row" class="odd"> 
        <td>2014</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr role="row" class="even"> 
        <td>2013</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr role="row" class="odd"> 
        <td>2012</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
    <script type="text/javascript"> 
     $('#advertiser_chart').highcharts({ 
     data: { 
      table: 'datatable' 
     }, 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: '' 
     }, 
     yAxis: { 
      allowDecimals: false, 
      title: { 
       text: '' 
      } 
     }, 
     xAxis: { 
      allowDecimals: false, 
      title: { 
       text: '' 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       //return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase(); 
       return '<b>' + this.series.name + '</b><br/>' + this.y;  
      } 
     }, 
     plotOptions: { 
      series: { 
       //pointWidth: 40,// Remove padding between olumns 
      } 
     } 
    }); 
    </script> 
</html>

Любое решение, которое я могу получить?

Вот скрипка, а

https://fiddle.jshell.net/ra527ee8/

источник

2016-02-22 Punit Gajjar

Как вы визуализация данных таблицы Динамически затем попытаться загрузить данные с возрастающим порядком в случае, если он находится в убывающем.

ваш стол должен выглядеть, как показано ниже, и заменить тело таблицы:

<tbody> 
       <tr role="row" class="odd"> 
        <td>2012</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr role="row" class="even"> 
        <td>2013</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr role="row" class="odd"> 
        <td>2014</td> 
        <td>0</td> 
        <td>0</td> 
       </tr> 
       <tr role="row" class="even"> 
        <td>2015</td> 
        <td>1</td> 
        <td>3</td> 
       </tr> 
       <tr role="row" class="odd"> 
        <td>2016</td> 
        <td>3</td> 
        <td>11</td> 
       </tr> 
      </tbody>

источник

2016-02-22 11:21:53 lalitpatadiya

Спасибо человеку,. работает . ! –

Проблема с последней шириной столбца в Highcharts

ответ

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