javascript - Highchart 导出未在系列数据标签上应用样式(字体大小)

Question

我正在使用 High Charts 创建柱形图 -- 我想将格式良好的图表导出为PNG图像，我能够应用所有必要的样式正在导出，但导出时我无法在系列数据标签上应用样式-- 我希望它们在导出图像中的字体大小减小。

我在这里插入代码，但不知何故导出链接/按钮没有出现在下面的图表中

Fiddle Sample

我们将不胜感激及时的帮助。

Highcharts.chart('container', {
  navigation: {
    menuStyle: {
      background: '#E0E0E0'
    },
    buttonOptions: {
      theme: {
        style: {
          cursor: 'pointer',
          color: '#039',
          textDecoration: 'underline'
        },
        states: {
          hover: {
            fill: 'white' //'#a4edba'
          },
          select: {
            stroke: '#039',
            fill: 'white'
          }
        }
      }
    }
  },
  exporting: {
    buttons: {
      contextButton: {
        enabled: false

      },
      exportButton: {
        text: 'Download', //'<span class="glyphicon glyphicon-download-alt"></span>',
        menuItems: [{
          textKey: 'downloadPNG',
          onclick: function() {
            this.exportChart();
          }
        }, {
          textKey: 'downloadJPEG',
          onclick: function() {
            this.exportChart({
              type: 'image/jpeg'
            });
          }
        }]
      },
    },
    enabled: true,
    filename: 'Industry Data Set',
    sourceWidth: 380,
    sourceHeight: 300,
    chartOptions: { // specific options for the exported image
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
          pointWidth: 10,
          groupPadding: 0,
          dataLabels: {
            enable: true,
            style: {
              fontSize: "10px",
              fontWeight: "normal"
            }
          }

        },

      },
      xAxis: {
        //lineWidth: 1,
        labels: {
          rotate: -45,
          enabled: true,
          //format: "{value:.0f}",
          style: {
            fontSize: "6px",
            fontFamily: "Arial"
          }
        },
      },
      yAxis: {
        lineWidth: 1,
        title: {
          text: "Count",
          style: {
            fontFamily: "Arial",
            fontSize: "8px",
          }
        },
        labels: {
          //rotate: -45,
          enabled: true,
          format: "{value:.0f}",
          style: {
            fontSize: "6px",
            fontFamily: "Arial"
          }
        },
        gridLineWidth: 0
      },
    },
    //scale: 2,
    fallbackToExportServer: false
  }, // Exporting End

  credits: {
    enabled: false
  },
  colors: ['#00Aeef', '#f4b213', '#9cc84b', '#2bc4b6', '#8d64aa', '#0a3f6b', '#aa5019'],
  chart: {
    type: 'column'
  },
  title: {
    text: 'Industries'
  },

  xAxis: {
    type: 'category',

    lineWidth: 1,
    tickWidth: 0,
    title: {
      text: "",
      style: {
        fontFamily: "Arial"
      }
    }
  },
  yAxis: {
    lineWidth: 1,
    title: {
      text: "Count",
      style: {
        fontFamily: "Arial"
      }
    },
    gridLineWidth: 0,
    labels: {
      enabled: true,
      format: "{value:.0f}",
      style: {
        fontSize: "8px",
        fontFamily: "Arial"
      }
    },
    startOnTick: true,
    endOnTick: true
  },

  legend: {
    enabled: false
  },
  tooltip: {
    pointFormat: 'Count <b>{point.y}</b>'
  },
  plotOptions: {
    series: {
      pointWidth: 20,
      groupPadding: 0,
    }
  },
  series: [{
    name: 'Population',
    data: [
      ['Shanghai', 23.7],
      ['Lagos', 16.1],
      ['Istanbul', 14.2],
      ['Karachi', 14.0],
      ['Mumbai', 12.5],
      ['Moscow', 12.1],
      ['São Paulo', 11.8],
      ['Beijing', 11.7],
      ['Guangzhou', 11.1],
      ['Delhi', 11.1],
      ['Shenzhen', 10.5],
      ['Seoul', 10.4],
      ['Jakarta', 10.0],
      ['Kinshasa', 9.3],
      ['Tianjin', 9.3],
      ['Tokyo', 9.0],
      ['Cairo', 8.9],
      ['Dhaka', 8.9],
      ['Mexico City', 8.9],
      ['Lima', 8.9]
    ],
    dataLabels: {
      rotation: -90,
      y: -17,
      align: "center",
      enabled: true,
      borderColor: "",
      style: {
        fontSize: "10px",
        fontWeight: 'normal',
        fontFamily: "Arial",
        textShadow: false
      }
    }
  }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="min-width: 300px; height: 470px; margin: 0 auto"></div>

Answer 1

您需要覆盖导出属性中的 series 选项。 plotOptions.series 不会影响系列，因为特定系列的选项具有更高的优先级。

exporting: {
  chartOptions: {
       series: [{
         dataLabels: {
           style: {
             fontSize: "6px",
             fontWeight: "normal"
           }
         }
       }],

示例:http://jsfiddle.net/s0uj4Lkk/2/