Question

我终于使用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',},

});
 });

我已经制定了一个jsfiddle来展示它目前是如何运作的。

http://jsfiddle.net/6x82om3x/10/

此代码包装在jquery .load（）函数中，该函数将文件中的右表行加载到指定div ID的页面中，然后从中调用数据。为了简单起见，我把它留在了JS小提琴中。我知道我不需要正常的td调用第二次调用，但是对于jsfiddle示例。

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

无法实现此功能，所以任何帮助都将受到赞赏

由于

理查德

刚刚尝试过。我认为这将是这些方面的内容jsfiddle.net/6x82om3x/12

在多个数据集上使用jqplot

0 个答案: