javascript - 如何创建对 X 轴和 Y 轴都使用字符串的图表？-6ren

javascript - 如何创建对 X 轴和 Y 轴都使用字符串的图表？

转载作者：行者123 更新时间：2023-11-29 18:49:15

25

4

在ChartJS的文档页面上，正好有一个部分对应我的问题，但我看不懂它instruction .它写道:

If global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only data.labels is defined, this will be used. If data.xLabels is defined and the axis is horizontal, this will be used. Similarly, if data.yLabels is defined and the axis is vertical, this property will be used. Using both xLabels and yLabels together can create a chart that uses strings for both the X and Y axes.

Specifying any of the settings above defines the x axis as type: category if not defined otherwise. For more fine-grained control of category labels it is also possible to add labels as part of the category axis definition. Doing so does not apply the global defaults.

这是我尝试过的:

var options = {
    type: "line",
    data: {
        datasets: [{
            label: "My First Dataset",
            data: [{
                x: 'January',
                y: 'A'
            }, {
                x: 'March',
                y: 'B'
            }],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
            }],
            yAxes: [{
                type: 'category',
                labels: ["A", "B", "C"],
            }]
        }
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

还有这个:

var options = {
    type: "line",
    data: {
        xLabels: ["January", "February", "March", "April", "May", "June"],
        yLabels: ["A", "B", "C"],
        datasets: [{
            label: "My First Dataset",
            data: [{
                x: 'January',
                y: 'A'
            }, {
                x: 'March',
                y: 'B'
            }],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {}
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

不幸的是，这些都不起作用。

最佳答案

经过多次尝试和错误，我终于找到了解决方案。不得不说，chart.js的文档写的很不清晰，有待改进。

我的发现是:

xLabels 和 yLabels 方法无效。这两个参数没有明确的文档。
不要关心将 type 设置为 category。 chart.js 只接受数值；您必须使用自己的回调方法将值映射到字符串。

var options = {
    type: "line",
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: "My First Dataset",
            data: [1, 2, 3, 1, 1, 1],
            fill: false,
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    max: 3,
                    min: 1,
                    stepSize: 1,
                    callback: function(label, index, labels) {
                        switch (label) {
                            case 1:
                                return 'A';
                            case 2:
                                return 'B';
                            case 3:
                                return 'C';
                        }
                    }
                }
            }]
        }
    }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

关于javascript - 如何创建对 X 轴和 Y 轴都使用字符串的图表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51908228/

25

4

0

文章推荐： javascript - 回调函数抛出错误

文章推荐： MySQL - 删除有条件的行

文章推荐： MySQL 错误 1093 - 无法在 FROM 子句中指定要更新的目标表

文章推荐： javascript substring 方法支持整数 - chrome

MSSQL监控数据库的DDL操作(创建，修改，删除存储过程，创建，修改，删除表等)
前言：有时候，一个数据库有多个帐号，包括数据库管理员，开发人员，运维支撑人员等，可能有很多帐号都有比较大的权限，例如DDL操作权限(创建，修改，删除存储过程，创建，修改，删除表等），账户多了，管理
javascript - 使用 Storybook 创建 React App 创建 webpack 问题
所以我用 Create React App 创建并设置了一个大型 React 应用程序。最近我们开始使用 Storybook 来处理和创建组件。它很棒。但是，当我们尝试运行或构建应用程序时，我们不断遇
javascript - 创建 Angular Directive(指令)以重用代码 - 创建 html 时解析错误
遵循我正在创建的控件的代码片段。这个控件用在不同的地方，变量也不同。我正在尝试编写指令来清理代码，但在 {{}} 附近插入值时出现解析错误。刚接触 Angular ，无法确定我错过了什么。请帮忙。
java - 创建 JAX-RS 提供程序以从 InputStream 创建 Java Image
我正在尝试创建一个 image/jpeg jax-rs 提供程序类，它为我的基于 post rest 的 Web 服务创建一个图像。我无法制定请求来测试以下内容，最简单的测试方法是什么？ @POST
c - 当我使用 FILE 创建 txt 文件时，Dev C++ 创建 test.txt
我一直在 Windows 10 的模拟器中练习 c。后来我改用dev C++ IDE。当我在 C 中使用 FILE 时。创建的文件的名称为 test.txt ，而我给出了其他名称。请帮助解决它。下面
ios - 为什么我们不遵循使用 xib 创建 customTableViewCell 的相同过程，就像使用 xib 创建 customView 一样？
当我们创建自定义 View 时，我们将 View 文件的所有者设置为自定义类，并使用 initWithFrame 或 initWithCode 对其进行实例化。当我们创建 customUITable
创建 Pthreads
我正在尝试为函数 * Producer 创建一个线程，但用于创建线程的行显示错误。我为这句话加了星标，但我无法弄清楚它出了什么问题...... #include #include #include
创建、调用JavaScript对象的方法集锦
今天在做项目时，遇到了需要创建JavaScript对象的情况。所以Bing了一篇老外写的关于3种创建JavaScript对象的文章，看后跟着打了一遍代码。感觉方法挺好的，在这里与大家分享一下。 &
python - 创建 StringToSign
我正在阅读将查询字符串传递给 Amazon 的 S3 以进行身份验证的文档，但似乎无法理解 StringToSign 的创建和使用方式。我正在寻找一个具体示例来说明 (1) 如何构造 String
c# - 创建、不等待和确保任务完成的正确方法
前言:我对 C# 中任务的底层实现不太了解，只了解它们的用法。为我在下面屠宰的任何东西道歉: 对于“我怎样才能开始一项任务但不等待它？”这个问题，我找不到一个好的答案。在 C# 中。更具体地说，即使任
linq - 创建 ILookups
我有一个由一些复杂的表达式生成的 ILookup。假设这是按姓氏查找人。 (在我们简单的世界模型中，姓氏在家庭中是唯一的) ILookup families; 现在我有两个对如何构建感兴趣的查询。首
WIX bundle 创建
我试图创建一个 MSI，其中包含和 exe。在 WIX 中使用了捆绑选项。这样做时出错。有人可以帮我解决这个问题。下面是代码: 错误 error LGH
Yii 创建、更新具有不同字段的表单
在 Yii 中，Create 和 Update 通常使用相同的形式。因此，如果我在创建期间有电子邮件、密码、...other_fields...等字段，但我不想在更新期间专门显示电子邮件和密码字段，但
qt - 创建 QModelIndex
上周我一直在努力创建一个给定一行和一列的 QModelIndex。或者，我会满足于在已经存在的 QModelIndex 中更改 row() 的值。任何帮助，将不胜感激。编辑: QModelInd
C: 创建、传递和访问指向常量字符串的常量指针数组
出于某种原因，这不起作用: const char * str_reset_command = "\r\nReset"; const char * str_config_command = "\r\nC
r - 创建 "other"字段
现在，我有以下由 original.df %.% group_by(Category) %.% tally() %.% arrange(desc(n)) 创建的 data.frame。 DF 5),
vim - 创建〜/.vimrc后错误打开文件
在今天之前，我使用/etc/vim/vimrc来配置我的vim设置。今天，我想到了创建.vimrc文件。所以，我用 touch .vimrc cat /etc/vim/vimrc > .vimrc 所
iPhone:创建 MKAnnotation
我可以创建一个 MKAnnotation，还是只读的？我有坐标，但我发现使用 setCooperative 手动创建 MKAnnotation 并不容易。想法？最佳答案 MKAnnotation
iphone - 创建 NSDictionary
在以下代码中，第一个日志语句按预期显示小数，但第二个日志语句记录 NULL。我做错了什么？ NSDictionary *entry = [[NSDictionary alloc] initWithOb
php - 创建/添加多维数组值时的未定义偏移
我正在使用与此类似的代码动态添加到数组； $arrayF[$f+1][$y][$x+1] = $value+1; 但是我在错误报告中收到了这个: undefined offset :1 问题:尝试创

首页

博学

6Ren·AI

商城

javascript - 如何创建对 X 轴和 Y 轴都使用字符串的图表？