chart.js

Question

我正在使用 Chart.JS v 2.9.3 创建折线图

折线图显示所选产品的月总费用

For example, if the user select XYZ product then this charts would show the monthly expenses [Jan-2021-Dec-2021] and if that respective product expense only present Jan-2021 then it displays month on y-Axes at staring

这里是jsfiddle example

添加我已经尝试过的偏移技巧 xAxes : [{ offset:true }],

var config = {
  type: 'line',
  data: {
    labels: ["jan-2021"],
    datasets: [{
      label: "month-year",
      data: [65],
      backgroundColor: "rgb(118, 101, 228)",
    }],
 },
  scales : {
      xAxes : [{
         offset:true
      }],
  },
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<div class="myChart">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

<canvas id="myChart"></canvas>
          </div>

请参考上图了解我要归档的内容，我不关心点 在图表上

如您所见，这些点位于 y 轴上。当图表中只有一个数据时，是否可以将折线图居中？

Answer 1

您可以使用对齐选项：

var mybarChart = new Chart(ctx, {
  type: 'bar',
  responsive: true,
  data: data,
  options: {
    legend: {
      display: false,
      position: 'bottom',
      align: 'center'
    },


var config = {
  type: 'line',
  data: {
    labels: ["", "January-2021", ""],
    datasets: [{
      label: "month-year",
      data: [0, 134335066, 0],
      backgroundColor: "rgb(118, 101, 228)",
    }],

  options: {
        legend: {
          display: false,
          position: 'bottom',
          align: 'center'
        },

  },
  scales: {},
};

参考this

Answer 2

Chart.js 不支持这种用例，因为点和标签不再对齐，因此图表图像失真。如果你真的想要这个，你可以事先检查你的代码是否只有 1 个数据点。如果是这种情况，请在前后的标签数组中添加一个空字符串，并在数据数组的后面添加零（或者作为单个数据点的值略低，这样比例就不会大步前进) 像这样：

var config = {
  type: 'line',
  data: {
    labels: ["", "January-2021", ""],
    datasets: [{
      label: "month-year",
      data: [0, 134335066, 0],
      backgroundColor: "rgb(118, 101, 228)",
    }],
  },
  scales: {},
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

<div class="myChart">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>

  <canvas id="myChart"></canvas>
</div>

chart.js - 当图表 js Linechart 中只有一个标签时如何绘制和管理线条

chart.js - how to draw and manage line when only one label present in chart js Linechart

javascript

linechart