Highcharts: Generate chart from tables having linked data

问题

I have a table where data values are wrapped with an <a> tag. Highcharts plugin is used to generate a pie chart from that table. But for some reason it is not showing/ generating. If I remove link from data values, then it works fine. Is there any way to generate the pie chart while keeping the links?

$(function() {
  $('#chart-cont').highcharts({
    data: {
      table: 'datatable',
    },
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Data extracted from a HTML table in the page'
    },
  });
});

#chart-cont {
  min-width: 310px;
  height: 400px;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="chart-cont"></div>

<table id="datatable">
  <tr>
    <th>Colors</th>
    <th>Values</th>
  </tr>
  <tr>
    <th>Blue</th>
    <td><a href="#">40</a>
    </td>
  </tr>
  <tr>
    <th>Black</th>
    <td>30</td>
  </tr>
  <tr>
    <th>Green</th>
    <td>20</td>
  </tr>
</table>

回答1:

You could make a data.parsed function (API) which removes the link from the column before using it in a series. For your table an example could be:

data: {
    parsed: function(columns) {
        // Loop over all the values from the table
        for(var i = 0; i < columns[1].length; i++) {
            // Strip away HTML content
            columns[1][i] = parseInt(stripHTML(columns[1][i]));
        }
    }
}

See this JSFiddle for an example use of this. I'll leave it up to you to find the best way to alter the columns to remove the anchor tag.

You can refer to this question for good ways to remove HTML from a string, and their disadvantages.

来源：https://stackoverflow.com/questions/34455783/highcharts-generate-chart-from-tables-having-linked-data

标签

jquery

Highcharts