jquery - Jqplot:附加右对齐文本和堆栈圆环图

Question

我修改了 Chrome 控制台中的 Legend 表格 HTML 以显示我需要的布局如下。我一直在试图找出如何将一些动态文本(数据值)附加和右对齐到标签 td在传说中，但我还没有发现它。 I saw a post here这可以工作，但我需要更多细节(海报建议使用不再位于 jqplot.js 文件中的对象进行增强，并且插件链接已损坏)。

我很感激这方面的任何帮助。谢谢。

$(document).ready(function() {
      var data = [50, 18, 10];

      var tl_labels = [
        ["Purple"],
        ["Gray"],
        ["light green"]
        
      ];

      var tl_colors = ['#8F2DA3', '#939EA9', '#50E3C2', ];

      var plot1 = $.jqplot('chart1', [data], {
        seriesDefaults: {

          renderer: $.jqplot.DonutRenderer,
          rendererOptions: {
            sliceMargin: 0,
            startAngle: -90,
            showDataLabels: false,
            dataLabels: tl_labels,
            totalLabel: false
          }
        },
        grid: {
          background: '#ffffff',
          drawBorder: false,
          shadow: false
        },
        legend: {
          show: true,
          location: 'ne',
          placement: 'outside',
          background: '#ffffff',
          position: 'relative',
          border: 'none',
          labels: tl_labels
        },


        seriesColors: tl_colors
      });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>


<div id="chart1" style="height:300px;width:350px; "></div>

这是我正在寻找的两个屏幕截图:

Answer 1

你可以试试这个。您还可以添加另一个 td在绘制图表后使用 jquery 在图例上。

$(document).ready(function() {
      var data = [50, 18, 10];
        
      var tl_labels = [
        ["Purple<span style='float:right'>20%</span>"],
        ["Gray<span style='float:right'>10%</span>"],
        ["light green<span style='float:right'>5%</span>"]
        
      ];

      var tl_colors = ['#8F2DA3', '#939EA9', '#50E3C2', ];

      var plot1 = $.jqplot('chart1', [data], {
        seriesDefaults: {

          renderer: $.jqplot.DonutRenderer,
          rendererOptions: {
            sliceMargin: 0,
            startAngle: -90,
            showDataLabels: false,
            dataLabels: tl_labels,
            totalLabel: false
          }
        },
        grid: {
          background: '#ffffff',
          drawBorder: false,
          shadow: false
        },
        legend: {
          show: true,
          location: 'ne',
          placement: 'outside',
          background: '#ffffff',
          position: 'relative',
          border: 'none',
          labels: tl_labels,
          
        },


        seriesColors: tl_colors
      });
      $("td.jqplot-table-legend:nth-child(2)","#chart1").width(100)
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.donutRenderer.min.js"></script>


<div id="chart1" style="height:300px;width:350px; "></div>