Jqplot：附加右对齐文本和堆栈圆环图

Question

我修改了 Chrome 控制台中的 Legend table HTML 以显示下面我需要的布局。我一直在尝试找出如何将一些动态文本（数据值）附加和右对齐到图例中的标签 td，但我还没有找到解决办法。 I saw a post here 可行，但我需要更多详细信息（ 发布者建议使用 jqplot.js 文件中不再存在的对象进行增强，并且 link 插件已损坏)。

感谢您对此提供的任何帮助。谢谢。

$(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。

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

Jqplot：附加右对齐文本和堆栈圆环图

Jqplot: append right-aligned text and stack donut chart

jquery

legend

jqplot

responsive

donut-chart