plotly - Plotly CSS 增加底线间距

问题描述

我创建了一个这样的情节

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 字段中的一个字段，因此编辑它需要更新很多字段。

标签： plotlyplotly.js

在您的标题中，您应该像这样在标题中xaxis指定：automargin: truestandoff

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>

plotly - Plotly CSS 增加底线间距

问题描述

解决方案

推荐阅读