热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

动态更改ChartJs轴标题

如何解决《动态更改ChartJs轴标题》经验,为你挑选了1个好方法。

我已经创建了这样的图表

if (userLanguageCode === "es") {
    customTooltipFormat = 'DD/MM/YYYY, HH:mm:ss';

    customDisplayFormats = {
        'millisecond': 'SSS [ms]',
        'second': 'HH:mm:ss', // 11:20:01 AM
        'minute': 'D/MM/YY HH:mm', // 11:20:01 AM
        'hour': 'D/MM/YY HH[h]', // Sept 4, 5PM
        'day': 'D/MM/YYYY', // Sep 4 2015
        'week': 'll', // Week 46, or maybe "[W]WW - YYYY" ?
        'month': 'MMM YYYY', // Sept 2015
        'quarter': '[Q]Q - YYYY', // Q3
        'year': 'YYYY', // 2015
    };
}

Chart.defaults.global.respOnsive= true;
Chart.defaults.global.animation = false;

datosChartHistoricos =  {
    labels: [],
    datasets: [{
        label: textoValor,
        backgroundColor: "rgba(0,181,255,0.5)",
        fill: chartWithIncrementValues? true: false,
        borderColor: "rgba(0,192,192,1)",
        pointBorderColor: "rgba(0,181,255,1)",
        pointBackgroundColor: "rgba(255,255,255,1)",
        pointBorderWidth: 1,
        data: []
    }]
};

var ctx = document.getElementById("grafica").getContext("2d");
chartHistoricos = new Chart(ctx, {
    type: chartWithIncrementValues? "bar" : "line",
    data: datosChartHistoricos,
    options: {
        responsive: true,
        elements: {
            rectangle: {
                borderWidth: 1,
                borderColor: 'rgb(0, 0, 0)',
                borderSkipped: 'bottom'
            }
        },
        scales: {
            xAxes: [{
                type: "time",
                time: {
                    tooltipFormat: customTooltipFormat,
                    displayFormats: customDisplayFormats,
                }
            }, ],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: textoValor + " (" + unidadesValor + ")"
                }
            }]
        },
        legend: {
            display: false,
        }
    }
});

这是图表的默认配置,数据是动态添加的,但用户可以选择显示不同的数据值,如温度,距离......为此,我只需更改数据集和标签的数据值,但是当我更改数据集值时,我无法想象如何使用Javascript更改yAxis标签.初始化标题没问题.

有小费吗?

谢谢!



1> jordanwillis..:

您可以通过更新labelString图表对象options属性中的值并调用.update()原型方法来更改比例标题.

假设我有一个图表实例调用myBar(实例是从Chart.js构造函数返回的),那么我可以使用下面的例子来更改y轴标题.

myBar.options.scales.yAxes[0].scaleLabel.labelString = "My New Title";
myBar.update();

这是一个代码集,演示了一个这方面的工作示例.只需点击"更改标题"按钮即可查看是否有效.


推荐阅读
  • 如何解决《chart.js图上的叠加线》经验,为你挑选了2个好方法。 ... [详细]
  • 网站前端开发的核心理念与必备技能解析 ... [详细]
  • 如何解决《如何在Chart.js中为条形图和折线图添加第二个Y轴?》经验,为你挑选了1个好方法。 ... [详细]
  • 如何解决《为什么chart.js画布不尊重容器元素的填充?》经验,为你挑选了1个好方法。 ... [详细]
  • chart.js中的分组条形图
    如何解决《chart.js中的分组条形图》经验,为你挑选了1个好方法。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 深入解析Gradle中的Project核心组件
    在Gradle构建系统中,`Project` 是一个核心组件,扮演着至关重要的角色。通过使用 `./gradlew projects` 命令,可以清晰地列出当前项目结构中包含的所有子项目,这有助于开发者更好地理解和管理复杂的多模块项目。此外,`Project` 对象还提供了丰富的配置选项和生命周期管理功能,使得构建过程更加灵活高效。 ... [详细]
  • 探讨 `org.openide.windows.TopComponent.componentOpened()` 方法的应用及其代码实例分析 ... [详细]
  • 成功实现Asp.Net MVC3网站与MongoDB数据库的高效集成
    我们成功地构建了一个基于Asp.NET MVC3框架的网站,并实现了与MongoDB数据库的高效集成。此次更新不仅完善了基本的创建和显示功能,还全面实现了数据的增删改查操作。在创建功能方面,我们修复了之前代码中的错误,确保每个属性都能正确生成。此外,我们还对数据模型进行了优化,以提高系统的性能和稳定性。 ... [详细]
  • JVM参数设置与命令行工具详解
    JVM参数配置与命令行工具的深入解析旨在优化系统性能,通过合理设置JVM参数,确保在高吞吐量的前提下,有效减少垃圾回收(GC)的频率,进而降低系统停顿时间,提升服务的稳定性和响应速度。此外,本文还将详细介绍常用的JVM命令行工具,帮助开发者更好地监控和调优JVM运行状态。 ... [详细]
  • voc生成xml 代码
    目录 lxmlwindows安装 读取示例 可视化 生成示例 上面是代码,下面有调用示例 api调用代码,其实只有几行:这个生成代码也很简 ... [详细]
  • 为了深入了解某些测试框架的工作原理,并在培训中构建一个简单的测试框架,我系统地研究了 should.js 的源代码。本文将分享我的学习过程和分析结果,帮助读者更好地掌握 should.js 的核心机制。 ... [详细]
  • 使用PyQt5与OpenCV实现电脑摄像头的图像捕捉功能
    本文介绍了如何使用Python中的PyQt5和OpenCV库来实现电脑摄像头的图像捕捉功能。通过结合这两个强大的工具,用户可以轻松地打开摄像头并进行实时图像采集和处理。代码示例展示了如何初始化摄像头、捕获图像并将其显示在PyQt5的图形界面中。此外,还提供了详细的步骤说明和代码注释,帮助开发者快速上手并实现相关功能。 ... [详细]
  • 如何在datetimebox中进行赋值与取值操作
    在 datetimebox 中进行赋值和取值操作时,可以通过以下方法实现:使用 `$('#j_dateStart').datebox('setValue', '指定日期')` 进行赋值,而通过 `$('#j_dateStart').datebox('getValue')` 获取当前选中的日期值。若需要清空日期值,可以使用 `$('#j_dateStart').datebox('clear')` 方法。这些操作能够确保日期控件的准确性和灵活性,适用于各种前端应用场景。 ... [详细]
  • OpenCV 2.4.9 源码解析:级联分类器的错误率与尺寸分析 ... [详细]
author-avatar
岩蕃wy之人
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有