javascript - 如何偏移散点图中的轴？-6ren

javascript - 如何偏移散点图中的轴？

转载作者：数据小太阳更新时间：2023-10-29 05:34:30

25

4

我想在散点图中的数据点周围、极值点和轴之间留出一点额外空间。

Chart.js documentation列出了据称常见的 offset 属性，这听起来和我想要的完全一样，但它似乎只适用于水平标记轴(代码片段的前半部分)。它对散点图(下半部分)没有任何作用。

我是不是做错了什么，或者这只是不受支持？解决方法是什么？

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

最佳答案

我不确定 offset 是否按您预期的那样工作。请注意，即使在第一张图中，yaxis 也没有进行填充。

我会 look into suggestedMin 和suggestedMax 如下图:

var options, ctx;

options = {
  type: 'line',
  data: {
    labels: [0, 1, 2],
    datasets: [{
      data: [0, 1, 0]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true
      }],
      yAxes: [{
        offset: true
      }]
    }
  }
}

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

options = {
  type: 'scatter',
  data: {
    datasets: [{
      data: [{
        x: 0,
        y: 0
      }, {
        x: 1,
        y: 1
      }, {
        x: 2,
        y: 0
      }]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 3
        }
    }],
      yAxes: [{
        display: true,
        ticks: {
            suggestedMin: -1,    // minimum will be -1, unless there is a lower value.
            suggestedMax: 2
        }
    }]
    }
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>

<body>
  <canvas id="chart1" height="100"></canvas>
</body>

<body>
  <canvas id="chart2" height="100"></canvas>
</body>

关于javascript - 如何偏移散点图中的轴？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57040552/

25

4

0

文章推荐： javascript - rollup.js 单次导入多次使用

vba - 偏移/调整先前定义的范围
我正在尝试从第 4 到 9 页以及第 12 和 13 页上的单元格中清除所有内容(包括图像)。我有以下代码，但它正在清除第 3-9 和 12-15 页中的内容，我不知道为什么。有什么想法吗？ Sub
matplotlib:向极坐标图刻度标签添加填充/偏移
有没有办法增加极坐标图刻度标签(θ)的填充/偏移？ import matplotlib import numpy as np from matplotlib.pyplot import figure,
JavaScript 偏移/分页问题
我正在调用本地 API 并尝试以分页样式进行操作。我有 n 张图片，我想将它们分成 n/4 行(每行 4 张图片)。因此，我正在调用我的 API，images/count,offset。但不知何故，
javascript - 选择和关注网页元素不起作用(偏移)
我的问题解释起来有点棘手，但无论如何我都会尝试。我有两个水平选项卡，当您单击它们时，会打开一个文本框内容。当他们被点击时，我试图“关注”他们。我在网上找到了很多资料，但除了我在下面显示的这段代码外，没
CSS 调整大小 % - 偏移
所以我有一个 float 的 div，我需要它始终向右 200 像素，并填充窗口的其余部分。有没有某种跨浏览器兼容的方法，我可以在不借助 javascript 的情况下使宽度填满页面的其余部分？最佳
jquery - 偏移 scrollTop
我有以下片段 $('html,body').animate({scrollTop: $('#menu').offset().top}, 'slow'); 单击链接时，我希望浏览器从#menu div
ios - 偏移 UIRefreshControl
我目前正在为我的应用程序使用 JASidePanel，并且我有一个 UITableViewcontroller 和一个 UIRefreshControl 作为它的 ViewController 之一。
matplotlib - 我如何在Matplotlib中调整(偏移)颜色条标题
给出以下代码: imshow(np.arange(16*16).reshape(16,16)) cb = colorbar() cb.set_label("Foo") cb.set_ticks([0,
循环内的 VBA 偏移 - 需要永远运行
我是编程新手，我认为 VBA 是一个很好的起点，因为我在 Excel 中做了很多工作。我创建了一个宏，它从输入框中获取一个整数(我一直使用 2、3 和 4 来测试)，并创建该数字的一组 4 层层次结
PHP 偏移 unix 时间戳
我在 PHP 中有一个 unix 时间戳: $timestamp = 1346300336; 然后我有一个我想要应用的时区的偏移量。基本上，我想应用偏移量并返回一个新的 unix 时间戳。偏移量遵循这
jQuery/CSS 偏移+鼠标移动问题
演示:http://jsfiddle.net/H45uY/6/ 我在这里想做的是将的左上角设为跟随鼠标。代码在没有段落的情况下工作正常(请参阅上面的演示)，但是当您添加段落时，被向上推，鼠标位于盒
c# - 如何合并具有特定移位(偏移)的两个位图？
假设我们有两个由无符号长(64 位)数组表示的位图。我想使用特定的移位(偏移)合并这两个位图。例如，将位图 1(较大)合并到位图 2(较小)中，起始偏移量为 3。偏移量 3 表示位图 1 的第 3 位
swift - 表格 View 偏移
通过在 pageViewController 中实现 tableView，tableView 与其显示的内容不一致。对此最好的解决办法是什么？最佳答案如果您的 TableView 是 View C
iphone - 导航栏的 View 偏移
我设置了一个在 nib 中显示地点信息的地点配置文件。当我在标准屏幕流程中推送此 View 时，它工作正常。但是，当我从另一个选项卡推送此 View 时，UINavigationBar 似乎抵消了它，
mysql - 如何选择一系列行但将其从特定 ID 偏移
如果我想选择 5 条记录，我会这样做: SELECT * FROM mytable LIMIT 5 如果我想添加偏移量，我会这样做: SELECT * FROM mytable OFFSET 5 LI
android - 在全屏和非全屏之间切换导致 View 偏移
我有一个应用程序，其中某些 View 需要全屏，而其他 View 不需要全屏。在某些情况下，我希望背景显示在状态栏下方，所以我在 View 加载时使用它来使 Activity 全屏显示: window
ios - 如何使 UITouches 偏移？
在下图中，我进行绘制，结果位于 A 点，就在我手指接触的地方。如何使图像显示在实际触摸上方约 40pt。 (二) 我正在使用经典的 coreGraphic UITouch 代码，如下所示: - (v
ios - 偏移 UITextField - 表情符号布局
只要键盘处于事件状态，我就会尝试偏移 UITextField，效果很好，直到我尝试了表情符号布局。有没有办法检测键盘输入的类型，以便找出高度差？谢谢最佳答案不是使用 UIKeyboardDidSh
ios - UIToolbar 偏移 - 出现黑条
这是我的 Swift 代码 (AppDelegate.swift): var window: UIWindow? var rootViewController :UIViewController? f
html - 浏览器缩放期间的绝对 div 偏移
我有一个 div 作为绝对定位的 body 的直接子节点，其 css 属性定义如下: div[id^="Container"] { display: block; position: a

首页

博学

6Ren·AI

商城

javascript - 如何偏移散点图中的轴？