图例标签中的换行符

时间:2018-09-20 22:05:39

标签: javascript plotly

使用plotly创建图。我的图形中有10条以上的迹线,我想水平设置它们。但是我几乎看不到其他人看不见的4-5。有没有办法打破界限并水平显示所有图例?

我不想使用图例组,因为它将在组中切换(隐藏/显示)图例。下面是我的示例代码:

var chartId = 'plotly';
var $chart = $('#' + chartId);
if ($chart.width() < 450) $chart.css('width', 450);

var data = [{
    "x": [1, 2, 3, 4],
    "y": [63.69, 62.55, 61.64, 61.39],
    
    // XXX: Comment out the line below to restore legend wrapping
    "legendgroup": 1
  },
  {
    "x": [1, 2, 3, 4],
    "y": [58.24, 54.93, 42.11, 50.75],
  }, {
    "x": [1, 2, 3, 4],
    "y": [51.49, 49.59, 37.12, 31.45],
  }, {
    "x": [1, 2, 3, 4],
    "y": [49.09, 58.54, 53.91, 43.12],
  }, {
    "x": [1, 2, 3, 4],
    "y": [70.53, 72.51, 72.28, 78.65],
  }, {
    "x": [1, 2, 3, 4],
    "y": [62.69, 59.09, 63.82, 62],
  }, {
    "x": [1, 2, 3, 4],
    "y": [76.27, 71.43, 59.83, 64.34],
  }, {
    "x": [1, 2, 3, 4],
    "y": [71.15, 81.82, 88.46, 74.29],
  }, {
    "x": [1, 2, 3, 4],
    "y": [57.89, 57.38, 52.08, 63.83],
  }, {
    "x": [1, 2, 3, 4],
    "y": [65.4, 63.27, 65.78, 64.03],
  }];

var layout = {
  "legend": {
    "orientation": "h"
  }
};

var p = Plotly.plot(chartId, data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id='plotly' style="width:100%,heigth:480px"></div>

0 个答案:

没有答案