代码之家 › 专栏 › 技术社区 › Nikko

添加xax时不显示图表JS

charts

Nikko · 技术社区 · 6 年前

我编辑了现有的教程并尝试制作一个时间序列图。我想要一个24小时格式的x轴。但是当我添加xAxes属性时,图形不会出现。

链接: https://jsfiddle.net/cnpante/t54vk1fc/1/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>{{ title }}</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
</head>

<body>


{% block body %}{% endblock %}

</body>
</html>

这是我的xAxes财产。

xAxes: [{
    type: 'time',
    time: {
        format: 'HH:mm',
        unit: 'hour',
        unitStepSize: 1,
        displayFormats: {
            'minute': 'HH:mm',
            'hour': 'HH:mm',
            min: '00:00',
            max: '23:59'
        }
    }
}],

1 回复 | 直到 6 年前

WhiteHat 6 年前

在这里似乎很管用,

看起来chart.js库没有包含在fiddle中。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["00:00", "01:25", "06:34", "15:21", "20:01", "22:00"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false,
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }],
            xAxes: [{
                type: 'time',
                time: {
                    format: 'HH:mm',
                    unit: 'hour',
                    unitStepSize: 1,
                    displayFormats: {
                        'minute': 'HH:mm',
                        'hour': 'HH:mm',
                        min: '00:00',
                        max: '23:59'
                    }
                }
            }],
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="600" height="300"></canvas>

推荐文章

Mnag · 下表中第95百分位的120%是多少?

1 年前

ttruhcheva · 如何在Power BI中创建灵活的数据标签?

2 年前

Î²Î³Î¹ Robert Longson · 广告牌js可选Y网格线-标签背景样式

6 年前

Ricardo Prida · Apache POI Powerpoint,XMLSlideShow。找不到createChart()

6 年前

Abhishek · 无法在NVD3中制作图表。x/y轴上的格式问题

6 年前

Paul Chris Jones · 在google中包含字符串列。可视化。数据组

6 年前

Joe Firebaugh · HighCharts项目符号图表似乎忽略了xAxis minTickInterval

6 年前

amea6995 · If/ElseIf语句仅适用于第一个If语句

6 年前

yash041 · google charts图形设置图例值和相同颜色列

6 年前

user8703261 · morris中的x轴问题。js公司

6 年前