Jquery 在多个数据集上使用jqplot

我终于使用HTML表中的数据完成了jqplot甜甜圈的功能

但是，我现在需要将它与许多数据集一起使用，以在不同的页面上形成图形

我想通过使用一个变量来实现这一点，我可以指定包含该表的文件和该表的ID。然而，目前我只能通过复制和重复我需要的每个图形来重用代码。这非常耗时而且不理想，特别是我可能需要在某个时候对它们进行更改。由于需要100多个图形，只需对一位代码进行更改就更好了

$("#TableID").load( "tablefile.html #myTable tr:nth-child(4)", function() {
var tableVariable = '#TableID';

var GetData1 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(1)').text());
var GetData2 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(2)').text());
var GetData3 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(3)').text());
var GetData4 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(4)').text());
var GetData5 = parseFloat($(tableVariable + ' tr:nth-child(2) td:nth-child(5)').text());
var GetData6 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(5)').text());
var GetData7 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(4)').text());
var GetData8 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(3)').text());
var GetData9 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(2)').text());
var GetData10 = parseFloat($(tableVariable + ' tr:nth-child(1) td:nth-child(1)').text());

var PieChartS1 = [ ['first', 1], ['second', 2], ['third', 3], ['fourth', 4], ['fifth', 5] ];
var PieChartS2 = [['Tenth', 10], ['ninth', 9], ['eight', 8], ['seventh', 7], ['sixth', 6]];
var PieChartS3 = [['Tenth', GetData10], ['ninth', GetData9], ['eight', GetData8], ['seventh', GetData7], ['sixth', GetData6]];
var PieChartS4 = [ ['first', GetData1], ['second', GetData2], ['third', GetData3], ['fourth', GetData4], ['fifth', GetData5] ];


var PieChartPlot = $.jqplot('PieChart', [PieChartS1, PieChartS2], {
 seriesDefaults: {
    renderer:$.jqplot.DonutRenderer,
    rendererOptions:{
    sliceMargin: 1,
    startAngle: -145,
    showDataLabels: true,
    dataLabels: 'label',
    padding: '5',
    ringMargin: '5',
    dataLabelThreshold: '1',
    highlightMouseOver: true,
  }   
},
grid: {background: 'transparent', borderWidth: '0', cursor: 'pointer',},

});
 });

我已经起草了一个JSFIDLE来展示它目前是如何工作的

此代码封装在jquery.load（）函数中，该函数将文件中的正确表行以指定的div ID加载到页面中，然后从该div ID调用数据。为了简单起见，我在JS提琴中省略了这一点。我知道我通常不需要第二个tr调用和td调用，但是对于jsfiddle示例需要

我需要能够只改变文件调用，然后改变每个图表的表ID，当然不会影响任何其他图表，因为在某些情况下，它们也可能位于同一页面上

如果在实施过程中遇到困难，请提供帮助

谢谢

理查德

---

我只是在尝试。我想应该是这样的，jsfiddle.net/6x82om3x/12

只是在尝试。我想应该是这样的，请具体说明哪些部分是动态的？