jqPlot圆环图与传说问题

Question

我有jqplot圆环图，我想在中间部分添加图表标签。还想在图形中间为标签添加滚动。因此，当用户滚动时，中心只能看到1-2个标签，并且可以看到休息。

请看一下附图。据我所知，我们无法在图表中心添加标签。有没有办法做到这一点？感谢您的帮助。

我目前的代码如下：

<script type="text/javascript">
var _chart5_plot_properties;
    _chart5_plot_properties = {
    title: " ",
    "seriesDefaults":{
          renderer:$.jqplot.DonutRenderer,              
          rendererOptions:{
            sliceMargin: 0,
            innerDiameter: 220,
            startAngle: -90,
            barPadding: 0,
            padding: 3,
          }
      },
      grid: {
        shadow: false,
        drawBorder: false,
        shadowColor: "transparent"
      },
      highlighter: {
        show: true,            
        tooltipLocation: "sw",          
        useAxesFormatters:false
      }
 }
 plot2 = $.jqplot("chart2", chart_data, _chart5_plot_properties);

Answer 1

我在jqPlot中找不到这个选项。 虽然，jqPlot有8个选项来定位图例，但它没有中心选项。 jqPlot Legend Locations

但稍微调整一下后，我可以使用jQuery完成它。由于我们需要jQuery来渲染/绘制jqPlot图表，所以我想到使用jQuery而不是纯Javascript。

我使用了两个函数defineDimensionsForLegendTable(parentContainerID, dimensions)和fixLegendsToCenter(parentContainerID)

使用这些功能时不应错过的其他重要事项

• 确保包含jquery.jqplot.js，jqplot.pieRenderer.js，jqplot.donutRenderer.js，jquery.jqplot.css文件（或缩小版本 - .min.js）

• 在placement中将outsideGrid设为legendOptions
legend: { show:true, placement: 'outsideGrid' }

• 为图例表提供更高的z-index
  #chart2 .jqplot-table-legend{ z-index: 99999; }

在这里找到工作小提琴 - jqPlot Donut Chart with legend in the center

注意：如果图表未显示在Google Chrome中，请尝试在Firefox或其他浏览器中打开它。

从代码中删除console.log行; - ）

您可以使用Foundation或Bootstrap来美化滚动条。 ： - ）

希望它有所帮助： - ）