Highcharts：从具有链接数据的表格生成图表 [英] Highcharts: Generate chart from tables having linked data

问题描述

我有一个表格，数据值用< a> 标签包装。使用 Highcharts 插件从该表格生成饼图。但由于某些原因，它没有显示/生成。如果我从数据值中删除链接，那么它工作正常。有没有什么办法可以在保留链接的情况下生成饼图？

$（function（）{$（'＃code'）>

< （data：{table：'datatable'，}，chart：{type：'pie'}，title：{text：'从页面的HTML表格中提取的数据'），}） ;}）;

＃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> <的第i;颜色和LT; /第> <的第i;值< /第> < / TR> < TR> <的第i;蓝色< /第> < td>< a href =＃> 40< / a> < / TD> < / TR> < TR> <的第i;黑色< /第> < TD> 30℃; / TD> < / TR> < TR> <的第i;绿色< /第> < TD> 20℃; / TD> < / tr>< / table>

解决方案

您可以创建 data.parsed 函数（ API ），它可以在串联使用之前从列中删除链接。对于你的表格，一个例子可能是：

pre $ data $
parsed：function（columns）{
//循环遍历表
中的所有值（var i = 0; i< columns [1] .length; i ++）{
//删除HTML内容
列[ 1] [i] = parseInt（stripHTML（columns [1] [i]））;

请参阅这个JSFiddle 为这个例子的使用。我会留给你找到最好的方式来改变列删除锚标签。

您可以参考这个问题，了解清除的好方法HTML中的字符串及其缺点。

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>

解决方案

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.

这篇关于Highcharts：从具有链接数据的表格生成图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！