ChartJS 如何设置X轴的最大标签?

2024-03-20

我从数组接收图表数据,其中存储了从 2016 年 1 月到 2018 年 12 月的日期。在图表中,它显示 3 年的所有月份。但我只需要展示1年。有任何想法吗?

在这里,我传递一个数组并更改月份的单位,还有显示格式

chartHour.config.data.datasets[0].data = array
chartHour.config.options.scales.xAxes[0].time = {
    unit: "month",
    stepSize: 1,
    displayFormats: {
      month: "MMM",
    },
  }

您可以通过定义来做到这一点min and max下的值time key.

If min or max被定义,这将分别覆盖数据最小值或最大值。看docs https://www.chartjs.org/docs/latest/axes/cartesian/time.html#date-formats了解更多信息。

chartHour.config.options.scales.xAxes[0] = {
  type: "time",
  time: {
    min: "2017-01-01",
    max: "2017-12-01",
    displayFormats: {
      day: "MMM YY"
    }
  }
};

请参阅下面的工作示例。

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const years = [2016, 2017, 2018];

const labels = [];
const dataSet = [];
years.forEach((year, index) => {
  months.forEach((month, monthIndex) => {
    const date = moment(`${month} ${year}`, "MMM YYYY").format('YYYY-MM-DD');
    labels.push(date);
    dataSet.push({
      x: date,
      y: (monthIndex + 12) * (index + 1)
    });
  });
});

var data = {
  labels: labels,
  datasets: [{
    pointRadius: 0,
    label: "Positive",
    lineTension: 0,
    data: dataSet,
    borderWidth: 1,
    backgroundColor: "rgba(0, 255, 0, 0.5)"
  }]
};
var options = {
  scales: {
    xAxes: [{
      type: "time",
      distribution: 'series',
      time: {
        min: "2017-01-01",
        max: "2017-12-01",
        displayFormats: {
          day: 'MMM YY'
        }
      },
      ticks: {
        source: "labels"
      },
      gridLines: {
        display: false
      }
    }]
  }
};

var ctx = document.getElementById("myChart").getContext("2d");

var myBarChart = new Chart(ctx, {
  type: "bar",
  data: data,
  options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ChartJS 如何设置X轴的最大标签? 的相关文章

  • 隐藏/显示 DIV - 将当前效果更改为淡入淡出

    我目前正在使用网络教程中找到的以下代码来显示 隐藏 DIV 效果很好 但不喜欢这种效果 希望 DIV 淡入 淡出 或者更平滑的东西 目前 DIV 是从右上角增长的 我该如何调整代码来做到这一点 你可以在这里看到它http jsfiddle
  • Sequelize.js 中的自定义或覆盖连接

    我需要使用创建自定义连接条件Sequelize js http sequelizejs com使用 MSSQL 具体来说 我需要加入TableB基于一个COALESCE中的列的值TableA and TableB并最终得到这样的连接条件 L
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • 如何通过aws-sdk(javascript或node)获取s3存储桶大小

    我尝试使用 javascript nodejs aws sdk 查找 获取 s3 存储桶信息 但没有找到这样的 api 如何通过 aws sdk javascript 或 node api 获取 s3 存储桶大小 信息 每天一次向 Clou
  • 无法填充名为“status”的数组

    我正在尝试做一些非常简单的事情 在 Javascript 中初始化一个数组 而且它在 Google Chrome 中不起作用 这是代码 status for i 0 i lt 8 i status i false alert status
  • Webpack 缺少 CommonsChunk 和 extract-text-webpack-plugin 模块

    我正在跟进Maxime Fabre 的 Webpack 教程 https blog madewithlove be post webpack your bags 我正在尝试获得一个非常简单的 webpack 包 其中包含 1 个入口点和 2
  • Google Charts(AreaChart)如何检测缩放变化

    我正在画一个面积图 在覆盖层上有一些标记 我正在使用explorer选项 仅限水平 以便用户放大和缩小 问题是我找不到一种方法来通知缩放更改 以便有机会更新制造商位置 有一个图表范围变化事件 但它不是由 AreaChart 触发的 我尝试检
  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • javascript 和 PHP 中的正则表达式有什么区别吗?

    这是在 javascript 中验证电子邮件地址的正则表达式 我不确定是否可以直接在 PHP 中使用它 a z d u00A0 uD7FF uF900 uFDCF uFDF0 uFFEF a z d u00A0 uD7FF uF900 uF
  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co
  • 改进 D3 序列旭日示例

    This D3示例作为我的出发点 http bl ocks org kerryrodden 7090426 http bl ocks org kerryrodden 7090426 我想更改提供图表的数据 并且我做了以下新示例 http j
  • JavaScript:从 JavaScript 调用锚标记的点击事件

    我有一个带有锚标记的页面 在我的 JavaScript 中 我设置HREF锚标记的属性基于一些 if else 条件动态变化 现在我想以编程方式调用锚标记的单击事件 我使用了下面的代码 但没有成功 var proxyImgSrc CostM
  • EJS在JS onload函数中访问express变量

    我知道你可以像这样获取 ejs 文件中变量的值 h1 h1 如果我要在同一个 ejs 页面的 onload javascript 函数中使用相同的标题变量 我将如何使用它 例如 这个函数产生一个控制台错误说 未捕获的语法错误 意外的标识符
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 在 HTML5 中将两个图像合并到一个画布上

    我正在使用 HTML5 canvas 元素 假设我有 2 个 ImageData 对象 我想将它们组合起来放在一张画布上 假设我不关心这些图像如何组合 两个 ImageData 对象具有完全相同的像素数和形状 组合两个图像的最佳方式是什么
  • Phonegap facebook 插件:android 的各种问题

    我正在尝试将 Phonegap 3 1 与 Phonegap facebook plugin 集成 以使我的应用程序能够使用 facebook 登录 https github com phonegap phonegap facebook p
  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 如何修复nodejs Express服务器中的“MulterError:意外字段”?

    我正在设置一个服务器来从客户端上传 zip 文件 服务器运行express和multer来执行此操作 上传文件时 服务器抛出 MulterError 意外字段 错误 我无法弄清楚是什么导致了它 我尝试过使用 png 图像 效果很好 但对于
  • 使用 JavaScript onclick 添加表格行

    我正在尝试使用 javascript 添加下面找到的完全相同的元素 我已经尝试了这里找到的所有解决方案 我什至尝试用php echo但没有运气 无需更改任何输入名称或类似内容 只需单击该按钮即可向表中添加另一行 仅此而已 这是该元素 tr
  • 使用 JQuery 预填充选择字段的下拉选项验证

    我有这个 JQuery 片段来防止选择已在另一个字段中选择的下拉选项 var coll select name service on change function coll each function var val this value

随机推荐

  • 如何使用 VisualVM 查找内存泄漏

    我怀疑我们的 ActiveMQ 连接桥存在重大内存泄漏 我们看到了典型的内存泄漏模式 应用程序加载良好 如果长时间运行或在短时间内一遍又一遍地重新启动 则速度会变慢 我查找了查找 Java 内存泄漏的现代最佳实践 许多开发人员似乎正在放弃
  • Log4Net 部署时不记录日志

    我正在使用 log4net 来记录我的应用程序 这是一个 WPF 应用程序 日志记录在调试模式下运行良好 但不适用于我部署的版本 该应用程序安装在 C Program Files x86 MyApp 中 我使用 InnoSetup 创建安装
  • Python 中的“类型错误:无法实例化抽象类”

    我有一个模块fi定义了以下类 class Asset metaclass abc ABCMeta pass abc abstractmethod def get price self dt datetime date kwargs Noth
  • Python 中的 COM/ActiveX 可以做什么? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我读到可以使用 COM ActiveX 在 Crystal Reports 中自动生成月度报告 我不太了解这是什么或者你可以用它做什么
  • Bootstrap 在 3 列上通过右拉、左拉改变 div 顺序

    我一整天都在研究这个问题 但没有找到解决方案 我在一个容器中一行有 3 列 1 右侧内容 右拉 2 导航 左拉 三 主要内容 它在大屏幕上的外观 Menu Content Right Content 在较小的屏幕上它应该是什么样子 Menu
  • str_replace 多维数组 PHP 中的键

    我有一个多维数组 如下所示 Array results gt Array 0 gt Array object id gt 13 id gt 13 idno gt e00110 o00005 2010 PROG display label g
  • 为什么 Chrome 要求 robots.txt?

    我在日志中注意到 Chrome 请求了robots txt和我所期望的一切一样 2017 09 17 15 22 35 sanic INFO Goin Fast http 0 0 0 0 8080 2017 09 17 15 22 35 s
  • 将另一个转换附加到现有属性

    有没有办法将新的转换属性附加到现有属性 例如 我有一个div animation 其定义如下 animation transform translateX 50 translateY 50 现在我想追加transform scale 1 到
  • SlowCheetah 未在构建时转换文件

    我有一个项目正在尝试使用 SlowCheetah 我已经创建了我的配置文件 Test web config 和我想要使用的所有转换 调试 Mock config 调试 SQL config 发布 在我的构建配置中 我有一个构建后事件应该将转
  • Django 管理员:获取根据 GET 字符串过滤的 QuerySet,与更改列表中所见完全一样?

    在 Django 管理中 用户可以设置过滤器来限制更改列表中显示的行 如何获取具有由查询字符串定义的过滤器集的 QuerySet 实例 例如 如果我传递 start date gte 2009 11 06 Django 管理员将在某处应用
  • Ant 构建类路径 jar 生成“打开 zip 文件时出错”

    我有一个在 eclipse 中构建的项目 依赖于第 3 方 jar 我正在尝试为 ant 生成一个合适的构建文件 使用 Eclipses 内置的导出 gt ant 构建文件功能作为起始块 当我运行构建目标时 出现以下错误 javac err
  • Dotnet build 和 dotnet pack 生成不同的 nupkg

    这与这个问题 https stackoverflow com questions 76467763 cant use analyzer in nuget package an instance of analyzer cannot be c
  • Django 以 JSON 形式返回单个记录

    我创建了一个表单 用于在我们的网络管理中添加有关客户的注释 我正在使用 jQuery 和 Ajax 来提交 for 我希望 Django 视图返回新添加的注释 记录 以便我可以将其附加到客户注释表中 我的 Ajax 发送正在工作 并且正在保
  • 使用 php Imagemagick 调整图像大小

    我正在尝试使用 imagemagick 的函数 thumbnailImage 调整图像大小 现在 我之后没有对图像进行任何操作 只是回显新的尺寸以查看它是否有效 到目前为止 它还不起作用 这是我的代码 注意 它确实呼应了原始尺寸 但不是新尺
  • 如何让浏览器提示保存密码?

    嘿 我正在开发一个 Web 应用程序 它有一个登录对话框 其工作原理如下 用户点击 登录 登录表单 HTML 通过 AJAX 加载并显示在页面的 DIV 中 用户在字段中输入用户名 密码并单击提交 这不是一个
  • Django 过滤器测试

    class BusinessPartnerFilter SilBaseFilter active django filters BooleanFilter name date deactivated lookup expr isnull p
  • Drop 事件在 Chrome 中未触发

    似乎 drop 事件没有在我预期的时候触发 我假设当被拖动的元素释放到目标元素上方时 会触发 drop 事件 但情况似乎并非如此 我有什么误解吗 http jsfiddle net LntTL http jsfiddle net LntTL
  • 如果我在具有备用信任路径的链中的附加证书已过期,会发生什么情况?

    我有一个由 Sectigo 前 Comodo Positive SSL 产品 颁发的证书 状态良好 1年7个月后到期 该证书由 Sectigo RSA 域验证安全服务器 CA 颁发 CA 链中有两个中间证书 由供应商提供 最近的 Secti
  • Git 合并错误“无法提交,因为您有未合并的文件”

    我忘了git pull编辑之前我的代码 当我提交新代码并尝试推送时 出现错误 无法推送 那时我做了一个git pull这使得一些有冲突的文件突出显示 我删除了冲突 但我不知道从这里该做什么 我尝试过了git commit再次但它说 不可能提
  • ChartJS 如何设置X轴的最大标签?

    我从数组接收图表数据 其中存储了从 2016 年 1 月到 2018 年 12 月的日期 在图表中 它显示 3 年的所有月份 但我只需要展示1年 有任何想法吗 在这里 我传递一个数组并更改月份的单位 还有显示格式 chartHour con