Question

我创建一个像这样的情节图

var trace2 = {
    y: [12, 25, 36, 42],
    x: ['20-05-2014', '20-05-2015', '20-05-2016', '20-05-2017'],
    type: 'scatter'
};

var plot_data = [trace2];

Plotly.newPlot('activity-chart', plot_data);

使用上面的样本值

这是的样子

底部的日期字段未显示全部文字，而是截止年份。我尝试使用chrome的检查功能来编辑CSS，但增加空格不会显示剪切文本。

标题也来自csv字段中的一个字段，因此对其进行编辑将需要更新很多字段。

Answer 1

在您的xaxis中，应在标题中将automargin: true与standoff一起指定，如下所示：

xaxis: {
    title: { text: 'Datetime', standoff: 50, },
    automargin: true,
    showgrid: false,
    zeroline: false       
},

由于您的代码实际上并不代表问题，因此我选择了另一段代码来演示这种效果：

<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
  <script>

    Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/stockdata.csv', function(err, rows){
    function unpack(rows, key) {
      return rows.map(function(row)
      { return row[key]; });}

    var trace = {
      x:unpack(rows, 'Date'),
      y: unpack(rows, 'IBM'),
      mode: 'markers',
      marker: {
        size: 7,
        line: {
        width: 0.5},
        opacity: 0.8},
      type: 'scatter'
    };

    var layout = {
      autosize: false,
      height: 600,
      width: 1200,
      title: 'IBM Stock Data: Jan 2007 - Mar 2016',
      xaxis: {tickvals:['2007-01-01', '2007-09-01', '2008-01-01', '2008-09-01', '2009-01-01', '2010-01-01', '2011-01-01', '2011-02-14',  '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01', '2016-01-01'],
              ticktext : ['2007', 'Financial Crisis Starts   ', '2008', 'Financial Crisis Ends   ', '2009', '2010', '2011', 'IBM wins Jeopardy!', '2012', '2013', '2014', '2015', '2016'],
              title: {text: 'Datetime', standoff: 50, },
              titlefont: { size: 30 },
              automargin: true,
      },    
      yaxis: {    
          title: 'Value',
          titlefont: { size: 30 },
          automargin: true, 
      },              
    }

    Plotly.newPlot('myDiv', [trace], layout);
    });

</script>  
</body>
</html>

巧妙地增加底线间距

1 个答案: