Chart.js xAxis 线性比例:奇怪的行为 [英] Chart.js xAxis linear scale : strange behavior

查看:16
本文介绍了Chart.js xAxis 线性比例:奇怪的行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在我的 chart.js 图表中的 x 轴上使用线性刻度.我添加了一些代码,因为 stackoverflow 在添加 jsfiddle url 时必须这样做,但我不明白这一点:

I'm trying to use linear scale on x-axis in my chart.js chart. I add some code beause stackoverflow makes it obligatory when adding a jsfiddle url, but I don't see the point :

var options={
    scales:{
    xAxes:[{ type: "linear"}]
  }
};

我得到一张非常奇怪的图表(第二张):http://jsfiddle.net/t0krmau8/

I'm getting a very strange chart (2nd one) : http://jsfiddle.net/t0krmau8/

在第一个图表中,我希望在 2 和 4 之间获得更多空间(比 1 和 2 之间的空间多 2 倍),这就是我使用线性刻度的原因.

In the first chart, I'd like to get more space between 2 and 4 (2 times more space than between 1 and 2), that's why I'm using a linear scale.

我是否使用了错误的线性刻度?还是我应该使用其他东西?

Am I using the linear scale wrong? Or should I use something else?

谢谢

推荐答案

您没有为 scatter line 图提供正确格式的数据.

You're not providing the data in correct format for the scatter line plot.

以下来自 Chart.js Docs 的示例描述了提供数据的正确格式.

The correct format to provide the data is described by the following example from Chart.js Docs.

var scatterChart = new Chart(ctx/* your canvas context*/, {
 type: 'line',
    data: {
        datasets: [{
            label: 'Scatter Dataset',
            data: [{
                x: -10,
                y: 0
            }, {
                x: 0,
                y: 10
            }, {
                x: 10,
                y: 5
            }]
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear',
                position: 'bottom'
            }]
        }
    }
});

来源

我认为 xy 应该可以分离成不同的数组,但你总是可以做一个组合步骤,将它们组合成对象.

I think the x and y should be separable into different arrays, but you can always do a combination step and combine them into objects.

这篇关于Chart.js xAxis 线性比例:奇怪的行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆