jqPlot多系列柱状图自定义pointLabels标签显示异常问题

问题根因 #

你当前的配置错误是将两个系列的自定义标签全部放在了第一个系列的pointLabels.labels参数中，多系列场景下每个系列需要单独配置自身的标签参数，且每个系列的labels属性只接受当前系列对应的一维数组，不需要嵌套二维数组。

修正后完整代码 #

var line1 = [14, 32, 41];
var line2 = [15, 33, 42];
var plot3 = $.jqplot('chart1', [line1, line2], {
  title: 'Bar Chart with Point Labels', 
  seriesDefaults: {
    renderer: $.jqplot.BarRenderer,
    // 全局开启所有系列的标签展示，也可每个系列单独配置
    pointLabels: {show: true}
  },
  series:[
    // 第一个系列对应line1的自定义标签
    {
      pointLabels: {
        labels: ['fourteen', 'thirty two', 'forty one']
      }
    },
    // 第二个系列对应line2的自定义标签
    {
      pointLabels: {
        labels: ['fifteen', 'thirty three', 'forty two']
      }
    }
  ],
  axes: {
    xaxis: { renderer: $.jqplot.CategoryAxisRenderer },
    yaxis: { padMax: 1.3 }
  }
});

核心调整说明 #

调整后分组柱状图会按「分类1柱1、分类1柱2、分类2柱1、分类2柱2、分类3柱1、分类3柱2」的顺序展示标签，完全匹配你期望的输出效果。

内容的提问来源于stack exchange，提问作者Michael