Question

如何删除JQPlot图表图例中样本周围的边框？以下是我的代码。样本周围有一个边框，但边框比正方形大，我宁愿将其删除。那么这可能是第二个问题（如果有人只回答一个或要求我，我将删除）：我为每个切片提供了4组原始数据。如何在图例中显示更多此类数据（例如：名称，数量和百分比）

以下是我的代码：

var budgetGraph = [["GROCERIES",4194.02,57.95302704323518,10],["BUSINESS MISCELLANEOUS",918.19,12.68756226742555,102],["HEALTHCARE/MEDICAL",729.65,10.082313909351063,11],["HOBBIES/SPORT",502.56,6.944381111880313,34],["OTHER EXPENSES",492.7,6.808135493918,19],["Other",399.81,5.524580174189884,0]];
var plot1 = jQuery.jqplot ('budgetGraph', [budgetGraph],
            {
                seriesDefaults: {
                    // Make this a pie chart.
                    renderer: jQuery.jqplot.PieRenderer,
                    rendererOptions: {
                    },
                    seriesColors: graphColours.pie
                },
                legend: {
                    renderer: jQuery.jqplot.PieLegendRenderer,
                    show: true,
                    renderOptions: {
                        numberColumns: 3
                    },
                    location: 'e',
                    placement: 'outside',
                    border: 'none'
                },
                grid: {
                    drawGridLines: false,        // wether to draw lines across the grid or not.
                    gridLineColor: 'transparent',   // CSS color spec of the grid lines.
                    background: 'transparent',      // CSS color spec for background color of grid.
                    borderColor: 'transparent',     // CSS color spec for border around grid.
                    borderWidth: 0.0,           // pixel width of border around grid.
                    shadow: false               // draw a shadow for grid.
                }
            }
        );

Answer 1

您可以通过覆盖css类删除大纲：

.jqplot-table-legend-swatch-outline { border: 0 solid #CCCCCC;}

对于第二个问题，您可以使用图例的“标签”选项：

legend: {
        show: true,
        location: 'ne',
        placement: "outside",
        labels: legendLabels
    }

在调用jqplot函数之前填充legendLabels数组，如下所示：

var legendLabels= ['label1 with data or %', 'label2 with data or %', 'label3 with data or %'];

在饼图（jqplot）的图例上删除样本周围的边框

1 个答案: