如何使用charts.JS制作阶梯线答案

【问题标题】：How to make a step line with charts.JS如何使用charts.JS制作阶梯线
【发布时间】：2021-11-19 09:42:06
【问题描述】：

我尝试让图表看起来像 StepLine，但它不起作用。我已经搜索过，我不知道是否可以在 Charts.Js 中做到这一点，这是我一直在做的，知道我能做什么吗？这是代码

Js 这是创建图表的地方，我在类型中输入了“line”，但是当我输入“Stepline”时，图表就消失了：

// Load charts:
$(document).ready(function () {
  load_line_chart();
});
function load_line_chart() {
  var ctx = document.getElementById("turn_over_line");
  var myChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      datasets: [
        {
          data: [31],
          label: "0",
          borderColor: "#3e95cd",
          fill: false
        },
        {
          data: [31],
          label: "1",
          borderColor: "#8e5ea2",
          fill: false
        },
        {
          data: [20],
          label: "2",
          borderColor: "#3cba9f",
          fill: false
        },
        {
          data: [10],
          label: "3",
          borderColor: "#e8c3b9",
          fill: false
        },
        {
          data: [0],
          label: "4",
          borderColor: "#c45850",
          fill: false
        },
        {
          data: [31],
          label: "5",
          borderColor: "#c45850",
          fill: false
        },
        {
          data: [20],
          label: "6",
          borderColor: "#c45850",
          fill: false
        },
        {
          data: [10],
          label: "7",
          borderColor: "#c45850",
          fill: false
        },
        {
          data: [0],
          label: "8",
          borderColor: "#c45850",
          fill: false
        }
      ]
    },
    options: {
      animation: {
        duration: 700,
        easing: "easeInOutSine"
      },
      title: {
        display: true,
        text: "Turn over per site"
      },
      responsive: false
    }
  });
}

HTML

<!-- Required meta tags -->

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- semantic UI -->
<link rel="stylesheet" type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css">
<!--Chart js-->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1">
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div>
  <br><br>
  <canvas id="turn_over_line" class="cann"></canvas>
</div>

CSS：

.cann {
  border: 3px solid darkgrey;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  width: 650px;
  height: 250px;
  margin-left: 3em;
}

【问题讨论】：

标签： javascript html jquery css chart.js

【解决方案1】：

查看此链接Stepped Line Charts

它在网站上。他们展示了如何做到这一点，你可以随意摆弄。

【讨论】：