2017-02-07 8 views
0

にラベルを付ける - 私はエクスポートするPNG画像にも形成され、チャートを、私はすべて適用することができますよエクスポート中にシリーズデータラベルにスタイルを適用できません - エクスポートされた画像でフォントサイズを小さくしたいとします。Highchartの輸出は、私はハイチャートを使用して縦棒グラフを作成してい

私はここにコードを挿入していますが、何らかの形で輸出リンク/ボタンは非常に理解されるであろう

Fiddle Sample

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

プロンプトヘルプの下のグラフに表示されていません。

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ファイルにうまく機能しますが、ここでサンプルGIF画像を見つけてください[リンク](https://mxhqkq-dm2306.files.1drv.com/y3p7BPUodSbkFc48Lga7YFChKPvVj6h6RRn61k7dj9YzbG-EK8DdEanEJUpiuiaVEn5_-yO19ifNa8DtbJydizPrEBarEHbqoanOOjc_Ls58sSL2wzmOiB7N46FfyQcmAQymVHw9Yf_K47r3Gik- ud0qg/Not%20Working%20Sample.gif?psid = 1) – Bhupendra

+0

どのHighchartを使用していますか? – morganfree

+0

私はHighcharts JS v4.2.5(2016-05-06) – Bhupendra

関連する問題