Javascript Highcharts数据模块和HTML表格更改分布列

我使用Highcharts及其数据模块创建数据可视化和使用HTML表的图表

我的表由混合列组成，字符串表示分布，数字表示值。这张桌子如下

现在，对于给定的HTML表，我希望用户能够选择图表中的系列所基于的分布列。从某种意义上说，当选择Product列时，图形将显示为

如果选择了Category列，则类似于

本质上，在本例中，X轴上的标签已更改。尽管如此，在某些情况下，当分布发生变化时，图形本身也会发生变化

迄今取得的进展：-

我已经设法找到了一个开始列和结束列，可以根据它定义分发列和值。尽管如此，这并不能遍历整个表以获得准确的结果

我在上使用了以下代码，将分发列作为类别，将下一列作为值：-

$(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable'),
            startColumn: 0,
            endColumn: 1
        },
        chart: {
            type: 'column'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                    this.point.y +' '+ this.point.name.toLowerCase();
            }
        }
    });
});

我真的很感激任何帮助

---

提前谢谢

你能提供Highcharts API链接到属性startColumn和endColumn吗？@RahulGupta，Highcharts网站上没有具体的文档。尽管如此，您可以在这里获得关于插件文件Beta版的一些信息-。编辑这里是一个链接到Highcharts演示之一，其中使用了startColumn和startRow-由于缺乏文档，我无法正确了解这些选项。根据您对这些选项如何帮助解决您的问题的看法，我建议您为类别和产品创建两个单独的地图，并根据用户的选择执行显示/隐藏selection@RahulGupta，这是一个选择。但挑战在于，我在这里展示的表格只是一个存根。这可能要大得多，并且混合了基于字符串和基于整数的列。