ハイチャートのカスタムCSSスタイル/フォーマットハイチャートオプションのみを使用

Question

ハイチャートオブジェクトの凡例オプションで多くの組み合わせを試しましたが、デザイナーが作成したデザインを正確に実現することができませんでした。私は必要なもの

は...まさにこのようになります伝説を持つことができるようにすることです Wanted legend layout

しかし、私は伝説のオプションで利用可能達成に最も近い結果がこれだった... The closest legend layout I could achieve

私はhighchart・オブジェクト定義内で使用

の特性は以下の通りであった。

legend: { 
    enabled: graphProperties.legend.enabled, 
    backgroundColor: ... 
    borderRadius: ... 
    verticalAlign: ... 
    align: ... 
    borderWidth: ... 
    x: ... 
    y: ... } 

は、任意の助けを事前にありがとうございます。

Answer 1

おそらくこれを出発点として使用できます。

http://jsfiddle.net/DqAqu/4/

$(function() { 
    var chart = new Highcharts.Chart({ 

     chart: { 
      renderTo: 'container', 
      backgroundColor: '#F5F5F5', 
      plotBackgroundColor: '#FFFFFF' 
     }, 

     symbols: [ 'square', 'square' ], 

     legend: { 
      backgroundColor: '#F5F5F5', 
      layout: 'horizontal', 
      floating: true, 
      align: 'left', 
      verticalAlign: 'top', 
      x: 60, 
      y: 1, 
      shadow: false, 
      border: 0, 
      borderRadius: 0, 
      borderWidth: 0 
     }, 

     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
      color: '#47D147'    
     }, { 
      data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1], 
      color: '#19A3FF'    
     }] 
    }); 
});​