2017-08-23 13 views
0

チャートを縦の凡例が下にある単一の横の列として表示しようとしています。プロットの高さを設定し、グラフの残りの部分のサイズを変更できるようにする

Highcharts.chart('container', { 
    "legend": { 
    "itemMarginBottom": 10 
    }, 
    "responsive": { 
    "rules": [ 
     { 
     "condition": { 
      "maxWidth": 700 
     }, 
     "chartOptions": { 
      "legend": { 
      "layout": "vertical" 
      } 
     } 
     } 
    ] 
    }, 
    "chart": { 
    "type": "bar", 
    "margin": [ 
     0, 
     0, 
     44, 
     0 
    ] 
    }, 
    "credits": false, 
    "plotOptions": { 
    "bar": { 
     "dataLabels": { 
     "enabled": true,   
     formatter() { 
      let value = this.y * 100; 
      return value > 4 ? `${ value.toFixed(1) }%` : null; 
     }, 

     "overflow": "none" 
     }, 
     "groupPadding": 0, 
     "pointPadding": 0 
    }, 
    "series": { 
     "animation": false, 
     "pointPadding": 0, 
     "pointWidth": 40, 
     "stacking": "percent", 
     "events": {}, 
     "marker": { 
     "states": { 
      "hover": { 
      "enabled": false 
      }, 
      "select": { 
      "enabled": false 
      } 
     } 
     } 
    } 
    }, 
    "series": [ 
    { 
     "name": "Optimized", 
     "data": [ 
     0.7455639561796032 
     ], 
     "zIndex": 0 
    }, 
    { 
     "name": "Partially Optimized", 
     "data": [ 
     0.1260607930874859 
     ], 
     "zIndex": -1 
    }, 
    { 
     "name": "Not Optimized", 
     "data": [ 
     0.064033328190094 
     ], 
     "zIndex": -2 
    }, 
    { 
     "name": "Plant Off", 
     "data": [ 
     0.06434192254281708 
     ], 
     "zIndex": -3 
    }, 
    { 
     "name": "Communication Failure", 
     "data": [ 
     0 
     ], 
     "zIndex": -4 
    } 
    ], 
    "title": false, 
    "tooltip": false, 
    "xAxis": { 
    "labels": false, 
    "maxPadding": 0, 
    "minPadding": 0 
    }, 
    "yAxis": { 
    "endOnTick": false, 
    "labels": false, 
    "maxPadding": 0, 
    "min": 0, 
    "minPadding": 0, 
    "reversedStacks": false, 
    "title": false 
    } 
}); 

そしてこれは、それがどのように見えるかです::ここで私はこれまで持っているものだチャートが応答する、と私は本当にのためにハードコードされた高さを設定しないようにしたいと思います

The chart's current appearance

全体のチャート。むしろ、グラフのプロットの高さを40pxとし、Highchartsでグラフの高さのサイズを設定して、グラフの凡例の残りの部分を含むようにしたいと思います。

理想的には、それは次のようになります。

What I want it to look like

ここJSFiddleへのリンクです。

答えて

関連する問題