个人中心
gpt4 book ai didi

momentjs - 如何防止带时间刻度的图表中的第一个/最后一个柱被切断

转载 作者：行者123 更新时间：2023-12-03 21:20:46 26 4
gpt4 key购买 nike

如何防止第一个和最后一个小节被切除(显示一半)？

我需要在x轴上显示简短的月份名称。我尝试过各种最小/最大设置，但似乎无法正确处理。

Example

var graphData = {
  dates: [
    '2016-06-01',
    '2016-07-01',
    '2016-08-01',
    '2016-09-01',
    '2016-10-01',
    '2016-11-01',
    '2016-12-01',
    '2017-01-01',
    '2017-02-01',
    '2017-03-01',
    '2017-04-01',
    '2017-05-01'
  ],
  wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
  draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
  losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
  winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};

var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: graphData.dates.map((date) => moment(date)),
    datasets: [
      {
        type: "bar",
        backgroundColor: "green",
        hoverBackgroundColor: "green",
        data: graphData.wins,
        yAxisID: "winsAndLosses"
      },
      {
        type: "bar",
        backgroundColor: "red",
        hoverBackgroundColor: "red",
        data: graphData.losses.map((i) => -i),
        yAxisID: "winsAndLosses"
      },
      {
        type: "line",
        data: graphData.winRates,
        fill: true,
        backgroundColor: "gray",
        pointRadius: 0,
        pointHoverRadius: 0,
        yAxisID: "winRate"
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "month",
          displayFormats: {
            month: "MMM"
          }
        },
        stacked: true,
        gridLines: {
          display: false
        },
        ticks: {
          callback: (label) => label.toUpperCase(),
          fontSize: 10     
        }
      }],
      yAxes: [
        {
          id: "winsAndLosses",
          stacked: true,
          ticks: {
            min: (lossesMax + 10) * -1,
            max: winsMax + 10,
            callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
          },
          display: false
        },
        {
          id: "winRate",
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10,
            callback: (label) => label + "%", // TODO: Localization (number formatting).
            fontSize: 10
          }
        }
      ]
    }
}
});
.myChartDiv {
  max-width: 800px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="800" height="400"></canvas>
    </div>
  </body>
</html>

最佳答案

有一个名为offset的设置似乎对我有用:

xAxes: [{
     offset: true
  }]

var graphData = {
  dates: [
    '2016-06-01',
    '2016-07-01',
    '2016-08-01',
    '2016-09-01',
    '2016-10-01',
    '2016-11-01',
    '2016-12-01',
    '2017-01-01',
    '2017-02-01',
    '2017-03-01',
    '2017-04-01',
    '2017-05-01'
  ],
  wins: [23, 5, 13, 24, 8, 11, 23, 5, 13, 24, 8, 11],
  draws: [2, 1, 2, 0, 2, 2, 3, 1, 2, 4, 0, 1],
  losses: [3, 1, 2, 10, 8, 8, 3, 1, 2, 10, 8, 8],
  winRates: [50, 40, 72, 30, 46, 80, 50, 40, 72, 30, 46, 80]
};

var winsMax = Math.max.apply(Math, graphData.wins);
var lossesMax = Math.max.apply(Math, graphData.losses);

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: graphData.dates.map((date) => moment(date)),
    datasets: [
      {
        type: "bar",
        backgroundColor: "green",
        hoverBackgroundColor: "green",
        data: graphData.wins,
        yAxisID: "winsAndLosses"
      },
      {
        type: "bar",
        backgroundColor: "red",
        hoverBackgroundColor: "red",
        data: graphData.losses.map((i) => -i),
        yAxisID: "winsAndLosses"
      },
      {
        type: "line",
        data: graphData.winRates,
        fill: true,
        backgroundColor: "gray",
        pointRadius: 0,
        pointHoverRadius: 0,
        yAxisID: "winRate"
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: "time",
        time: {
          unit: "month",
          displayFormats: {
            month: "MMM"
          }
        },
        stacked: true,
        gridLines: {
          display: false
        },
        ticks: {
          callback: (label) => label.toUpperCase(),
          fontSize: 10     
        },
        offset:true
      }],
      yAxes: [
        {
          id: "winsAndLosses",
          stacked: true,
          ticks: {
            min: (lossesMax + 10) * -1,
            max: winsMax + 10,
            callback: (label) => Math.abs(label) // TODO: Localization (number formatting).
          },
          display: false
        },
        {
          id: "winRate",
          ticks: {
            min: 0,
            max: 100,
            stepSize: 10,
            callback: (label) => label + "%", // TODO: Localization (number formatting).
            fontSize: 10
          }
        }
      ]
    }
}
});
.myChartDiv {
  max-width: 800px;
  max-height: 400px;
}
<script src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="800" height="400"></canvas>
    </div>
  </body>
</html>

关于momentjs - 如何防止带时间刻度的图表中的第一个/最后一个柱被切断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44183989/

26 4 0
文章推荐： iphone - iPad 分发问题
文章推荐： python - 如何在 Django 用户模型中添加新字段
文章推荐： iphone - EXC_BAD_ACCESS 在向数组添加数据时，同时使用 2 个 NSOperations
文章推荐： amazon-web-services - 同步 RDS DB 和 Cognito 的最佳方式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com