如何修改jqplot饼图内字体颜色及调整图例顺序？

需求说明 #

• 将饼图内部的数字（数据标签）显示为白色
• 调整图例顺序，使其与饼图切片的顺序一致

修改方案与代码调整 #

1. 设置饼图内部数字为白色：
   原代码中直接在rendererOptions下配置textColor无法生效，需将颜色配置嵌套在dataLabelOptions子项中，这是jqPlot PieRenderer控制数据标签样式的正确层级。

2. 让图例顺序匹配饼图：
   原代码里legend配置的reverse: true会反转图例展示顺序，导致与饼图切片顺序不符，移除该属性即可让图例顺序和饼图切片保持一致。

修改后的完整代码 #

var plot1 = jQuery.jqplot('gender_chart', [data], {
  seriesDefaults: {
    renderer: jQuery.jqplot.PieRenderer,
    rendererOptions: {
      showDataLabels: true,
      dataLabelFormatString: '%#.2f%',
      // 修正数据标签颜色的配置位置
      dataLabelOptions: {
        textColor: 'white'
      }
    }
  },

  seriesColors: ['#fb7601', '#365D98'],

  legend: {
    // 移除反转配置，图例顺序与饼图切片一致
    position: 'top',
    show: true,
    location: 'e',
    labels: {
      fontColor: 'white'
    }
  }
});

调整后效果：饼图内部的百分比数字将显示为白色，图例顺序会和seriesColors定义的切片颜色顺序完全匹配。

内容的提问来源于stack exchange，提问作者Hélisson Araújo