Question

我使用highcharts来生成我使用php + mysql生成的dinamic表的图形，我想点击它显示的图表类别只显示该类别的数据，就像它与列一样

＆＃13;

$(document).ready(function() {
  Highcharts.chart('chart', {
    data: {
      table: 'table_resultados'
    },
    chart: {
      type: 'column'
    },
    title: {
      text: ''
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: ''
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.series.name + '</b><br/>' +
          this.point.y + ' ' + this.point.name;
      }
    },
    credits: {
      enabled: false
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table_resultados" class="table table-bordered table-hover">
  <thead class="table-head">
    <tr>
      <th>Gravidade</th>
      <th class="nomes">SEGUNDA-FEIRA</th>
      <th class="nomes">TERÇA-FEIRA</th>
      <th class="nomes">QUARTA-FEIRA</th>
      <th class="nomes">QUINTA-FEIRA</th>
      <th class="nomes">SEXTA-FEIRA</th>
      <th class="nomes">SÁBADO</th>
      <th class="nomes">DOMINGO</th>
      <th class="nomes">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>FATAL</td>
      <td class="SEGUNDA-FEIRA">7</td>
      <td class="TERÇA-FEIRA">5</td>
      <td class="QUARTA-FEIRA">6</td>
      <td class="QUINTA-FEIRA">9</td>
      <td class="SEXTA-FEIRA">5</td>
      <td class="SÁBADO">12</td>
      <td class="DOMINGO">8</td>
      <td class="Total">52</td>
    </tr>
    <tr>
      <td>GRAVE</td>
      <td class="SEGUNDA-FEIRA">365</td>
      <td class="TERÇA-FEIRA">358</td>
      <td class="QUARTA-FEIRA">374</td>
      <td class="QUINTA-FEIRA">408</td>
      <td class="SEXTA-FEIRA">390</td>
      <td class="SÁBADO">529</td>
      <td class="DOMINGO">417</td>
      <td class="Total">2841</td>
    </tr>
    <tr>
      <td>LEVE</td>
      <td class="SEGUNDA-FEIRA">441</td>
      <td class="TERÇA-FEIRA">443</td>
      <td class="QUARTA-FEIRA">451</td>
      <td class="QUINTA-FEIRA">483</td>
      <td class="SEXTA-FEIRA">512</td>
      <td class="SÁBADO">497</td>
      <td class="DOMINGO">435</td>
      <td class="Total">3262</td>
    </tr>
    <tr>
      <td>NAO INFORMADO</td>
      <td class="SEGUNDA-FEIRA">190</td>
      <td class="TERÇA-FEIRA">210</td>
      <td class="QUARTA-FEIRA">208</td>
      <td class="QUINTA-FEIRA">217</td>
      <td class="SEXTA-FEIRA">220</td>
      <td class="SÁBADO">285</td>
      <td class="DOMINGO">240</td>
      <td class="Total">1570</td>
    </tr>
    <tr id="Totais">
      <td>TOTAL</td>
    </tr>
  </tbody>
</table>

<div id="chart" name="chart" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

＆＃13;

JSFIDDLE EXEMPLE

在这个示例中，我想要做的是单击FATAL并仅显示该类别的数据（表行）

Highcharts按类别分隔数据

0 个答案: