Chart.js中具有时间y轴的水平浮动条形图

xfb7svmp 于 2023-03-08 发布在 Chart.js

关注(0)|答案(2)|浏览(204)

我尝试修改https://www.chartjs.org/docs/latest/samples/bar/floating.html来创建一种时间轴图表，其中水平轴（范围数据）是时间戳，不幸的是我似乎无法显示数据，也没有看到任何错误消息等。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
</head>
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
<script>
//const labels = ["a","b","c","d","fff","g","h"]
const labels = ["a","b"]
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [[moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:34:03Z")],
          [moment("2021-11-23T00:24:14Z"),moment("2021-11-23T00:26:35Z")]]
      // This works fine (without 'yAxes' below):
      //data: labels.map(() => {
        //return [Math.random(), Math.random()];
      //}),
      //backgroundColor: Utils.CHART_COLORS.red,
    },
  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      yAxes: [{
        type: 'time',
      }],
      indexAxis: 'y',
        responsive: true,
        plugins: {
          legend: {
            position: 'top',
          },
          title: {
            display: true,
            text: 'Chart.js Floating Bar Chart'
          }
        }
  }
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</html>

编辑：JSF中间：https://jsfiddle.net/r5ypuvks/

chart.js

来源：https://stackoverflow.com/questions/70114840/horizontal-floating-bars-with-a-time-y-axis-in-chart-js

2条答案

按热度按时间

beq87vna1#

看来我的问题是

chart.js 3未使用正确的轴格式
我需要自己缩放图表
需要将水平轴称为x

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
</head>
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
<script>
//const labels = ["a","b","c","d","fff","g","h"]
const labels = ["a","b"]
const data = {
  labels: labels,
  datasets: [
    {
      label: 'Dataset 1',
      data: [[("2021-11-23T00:24:14Z"),("2021-11-23T00:34:03Z")],
          [("2021-11-23T00:25:14Z"),("2021-11-23T00:26:35Z")]]
      // This works fine (without 'yAxes' below):
      //data: labels.map(() => {
        //return [Math.random(), Math.random()];
      //}),
      //backgroundColor: Utils.CHART_COLORS.red,
    },
  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      scales: {
          x: {
              min: ("2021-11-23T00:20:14Z"), 
              max: ("2021-11-23T00:44:14Z") ,
            type: 'time',
          },
      },
      indexAxis: 'y',
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Floating Bar Chart'
        }
      }
  }
};
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);
</script>
</html>

展开查看全部

赞(0）回复(0）举报 2023-03-08

bwntbbo32#

感谢@jberryman的想法。我采纳了它，并在上面构建了这个：

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
</head>
<body>
<div>
  <canvas id="myChart"></canvas>
</div>
</body>
<script>
const data = {
  labels: [''],
  datasets: [
    { data: [[8,9]], backgroundColor: 'green' },
    { data: [[12, 14]], backgroundColor: 'green'},
        { data: [[7, 16]], backgroundColor: 'lightgrey'}
  ]
};
const config = {
  type: 'bar',
  data: data,
  options: {
      scales: {
          y: {
                stacked: true,
            },
          x: {
            min: 0, 
            max: 24 ,
            ticks: {
                stepSize: 2
            }
          },
      },
      indexAxis: 'y',
      responsive: true,
      plugins: {
        legend: false,
        title: false
      }
  }
};
var ctx = document.getElementById("myChart");
new Chart(ctx, config);
</script>
</html>

参见https://jsfiddle.net/h9vk5sfx/46/

展开查看全部

赞(0）回复(0）举报 2023-03-08

我来回答

Chart.js中具有时间y轴的水平浮动条形图

2条答案

相关问题

热门标签

最新问答