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

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

＆＃13;

＆＃13;

$(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)
    });

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;