Question

最后两个标签相互显示，如下图所示。我该如何解决？

这里有一些lorem ipsum所以stackoverflow不会抱怨我的帖子主要是代码：Lorem ipsum dolor sit amet，consectetur adipiscing elit。整数pharetra porta pretium。 Suspendisse vitae congue turpis，eu condimentum turpis。克拉一个ultrices velit。 Sed semper efficitur felis，et porttitor sapien vestibulum ac。 Sed viverra porttitor arcu，ac finibus ligula ultrices non。 Nullam quis porttitor elit。 Maecenas fringilla erat sed libero luctus efficitur vel sit amet massa。在nibh fringilla malesuada中的proin hendrerit metus。 Proin turpis turpis，tempor non venenatis eu，fringilla in nunc。 Proin ultricies neque坐在amet nisi posuere sagittis。 Vivamus erat massa，hendrerit nec nibh vitae，commodo faucibus felis。 Maecenas a urna diam。

选项：

var options = {
        scales: {

            xAxes: [{
                gridLines:{
                    display:false,
                },
                type:"time"
            }],

            yAxes: [{
                ticks:{
                    stepSize:10000
                }
            }]
        }
    };

数据：

{
                label: "My Dataset",
                fill: false,
                lineTension: 0.1,
                borderColor: "#8CCEC2",
                backgroundColor: "#8CCEC2",
                borderCapStyle: 'butt',
                borderJoinStyle: 'miter',
                pointRadius:0,
                data: [
                    {
                         x:moment((new Date()).toISOString()).subtract(1,"days")
                        ,y:9000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(2,"days")
                        ,y:11000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(3,"days")
                        ,y:8000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(4, "days")
                        ,y:10000
                    },
                    {
                         x:moment((new Date()).toISOString()).subtract(5, "days")
                        ,y:9000
                    }
                ],
                spanGaps: false
            }

Answer 1

不幸的是，由于所有的格式变化和可能性，chart.js有时会自动调整时间刻度x轴。你可以做两件事之一来解决这个问题。扩展图表容器的大小（以便有更多空间来呈现图表）或手动配置时间刻度以优化其外观。

在这个特定情况下，我使用time.unit属性以“天”为单位显示比例。以下是相关配置：

scales: {
  xAxes: [{
    gridLines: {
      display: false,
    },
    type: "time",
    time: {
      unit: 'day',
    }
  }],
  yAxes: [{
    ticks:{
      stepSize: 10000
    }
  }]
}

这是codepen来证明我的意思。

Answer 2

试试^ anchor (beginning of the string) [0-9]{5} 5 digits group (-[0-9]{5}){7} 7 more groups of 5 digits $ anchor (ending of the string) 这为我修好了。

之前：

后：

如，

scales.xAxes[0].time.round = 'day'

Chart.js 2.x：标签显示在彼此之上

2 个答案: