2017-02-07 1 views
0

Я создаю гистограмму с помощью High Графики - Я хочу экспорта хорошо сформирован график для PNG изображений, я могу применить все нужный стиль для экспорта, но Я не могу применять стиль на этикетках серийных данных при экспорте - Я хочу, чтобы они имели уменьшенный размер шрифта на экспортированном изображении.экспорта Highchart не применяя стиль (размер шрифта) на данной серию этикетки

Я вставив код здесь, но как-то кнопки/экспорт ссылка не отображается на графике ниже

Fiddle Sample

Refer the [Fiddle Sample][1] to have hands on, and **attached** required output image

Prompt помощь будет высоко оценена.

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>

ответ

2

Вам необходимо перезаписать series варианты в экспортирующей собственности. plotOptions.series не повлияет на серию, поскольку параметры для определенной серии имеют более высокий приоритет.

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

пример: http://jsfiddle.net/s0uj4Lkk/2/

+0

morangree: Спасибо за поддержку. В то время как ваши исправления хорошо работает на JSFiddle, но не на реальный файл .js в моем проекте Пожалуйста, найти образец рисунок здесь [ссылка] (https://mxhqkq-dm2306.files.1drv.com/y3p7BPUodSbkFc48Lga7YFChKPvVj6h6RRn61k7dj9YzbG-EK8DdEanEJUpiuiaVEn5_-yO19ifNa8DtbJydizPrEBarEHbqoanOOjc_Ls58sSL2wzmOiB7N46FfyQcmAQymVHw9Yf_K47r3Gik- ud0qg/Not% 20Working% 20Sample.gif? psid = 1) – Bhupendra

+0

Какую версию Highcharts вы используете? – morganfree

+0

Я использую Highcharts JS v4.2.5 (2016-05-06) – Bhupendra

Смежные вопросы