jqplot donut chart label/legend color and line

2019-07-20 20:37发布

问题:

I am working with jqplot donut and all seems to be working fine except that I am unable to give color to donut chart value % and a line that should link value % and the chart. I will use screen shots to better explain what my output is what i am trying to achieve

This is what my output looks like

Using this code

var plot1;
var storedData;
$(document).ready(function () {
    storedData = [ ['Take home pay', 44228.33], ['Tax', 8771.67], ['Super', 4162.5 ], ['Regular expenses', 0 ], ['Unallocated', 44228.33] ];
    jQuery.jqplot.config.enablePlugins = false;
    plot1 = $.jqplot('savings_expense', [storedData], {
        seriesDefaults: {
            // point markers.
            seriesColors: ["#3399FF", "#F6EB0A", "#FFC000", "#92D050", "#604A7B"],
            // make this a donut chart.
            renderer: $.jqplot.DonutRenderer,
            rendererOptions: {
                // Donut's can be cut into slices like pies.
                sliceMargin: 3,
                // Pies and donuts can start at any arbitrary angle.
                startAngle: 90,
                showDataLabels: true,
                highlightMouseOver : true,
                dataLabelPositionFactor: 1.5,
                padding: 50
            }

        }
    });
});

This is what I want to achieve

As you will notice I need to

  1. Display the legend in the same color what appears in the chart
  2. The line that links the legend text with the chart.

I will really appreciate if I can get some assistance on this.