使用图表js将缓冲区添加到Y轴

托尼克

有时图表值与图表高度相同。例如,我的图片红色条形为6,与y轴顶部数字相同。我可以添加一些缓冲区以使图表栏永远不会到达y轴的顶部吗?假设y轴现在变为7(或类似值)。

图片显示了我的问题(在新窗口中打开图片可更好地查看)

在此处输入图片说明

以斯拉·西顿

通过 Axis Range Settings

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings

suggestedMax: 7

1/2。静态最大值示例

将min更改为10max,max更改90(对于data [30,40,50,60])。

let chart = new Chart(ctx, {
    type: 'line',
    responsive: true,
    data: {
        datasets: [{
            label: 'First dataset',
            data: [30, 40, 50, 60]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 10,
                    suggestedMax: 90
                }
            }]
        }
    }
});
<canvas id="ctx" width="800" height="350"></canvas>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

2/2。动态“缓冲区”

首先,没有一个解决方案可以解决这个想法(与您的数据结构相关最大值)。对于最基本的数据结构(平面),这是一种解决方案:

  1. 获得[20,40,60,80]的最大值==> 80
  2. updateScaleDefaultsmaxy轴更改max+ buffer(在此示例中为20)

updateScaleDefaults-使用秤服务可以轻松更改秤的默认配置。您需要做的就是传递部分配置,该配置将与当前的秤默认配置合并以形成新的默认配置。https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults

示例:对于 data: [20,40,60, 80] 在此处输入图片说明

/* data */
var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f", '#1d49b8'],
    data: [20,40,60, 80]
  }]
};

/* buffer trick */
var buffer = 20;
const dataSet = data.datasets[0].data;
console.log("data: " + dataSet);
/* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max */
var maxDATAvalue = Math.max(...dataSet);
var maxValuePlusBuffer = maxDATAvalue + buffer;
console.log("max value(" + maxDATAvalue + ") / Plus Buffer(" + maxValuePlusBuffer + ")");


/* The default configuration for a scale can be easily changed using the scale service. */
/* https://www.chartjs.org/docs/latest/axes/#updating-axis-defaults */
Chart.scaleService.updateScaleDefaults('linear', {
    ticks: {
        max: maxValuePlusBuffer
    }
});

var options = {
  responsive: true,
  title: {
    text: 'Set max value to max(data) + Buffer',
    display: true
  },
  scales: {
    xAxes: [{
      stacked: true,
      ticks: {

      },
    }],
    yAxes: [{
      stacked: true,
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});
<canvas id="chart" width="800" height="350"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

相关Stackoverflow问:

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

node.js将空终止的字符串添加到缓冲区

来自分类Dev

node.js将空终止的字符串添加到缓冲区

来自分类Dev

将列表缓冲区中的元素添加到地图中(更新地图)

来自分类Dev

如何将列表项添加到字符串缓冲区?

来自分类Dev

添加到协议缓冲区重复字段

来自分类Dev

将轴名称添加到图表C#

来自分类Dev

如何将辅助轴添加到highstock图表?

来自分类Dev

将轴名称添加到图表C#

来自分类Dev

如何使用MP图表获取选定的条形x轴名称(将字符串添加到x轴)?

来自分类Dev

是否可以在vim中将特定的标记文件添加到特定的窗口/缓冲区?

来自分类Dev

是否可以在vim中将特定的标记文件添加到特定的窗口/缓冲区?

来自分类Dev

如何将月份作为 x 轴添加到股票图表/高价图表

来自分类Dev

ffmpeg:将音频与混合音频添加到叠加过滤的视频时,会出现缓冲区队列溢出错误

来自分类Dev

在特定位置将字符串添加到字符数组中,从而在 C 编程中导致缓冲区溢出

来自分类Dev

如何在R>中使用双Y轴将图例添加到ggplot

来自分类Dev

如何使用 xyplot 将条带标签添加到 y 轴

来自分类Dev

将 d3.js 图表添加到 Wordpress

来自分类Dev

为什么当我使用copy_from_user时,某些模糊字符添加到了原始缓冲区中?

来自分类Dev

如何使用chart.js将图像作为标签添加到画布图表

来自分类Dev

使用d3js将Jointplot添加到NBA射门图表

来自分类Dev

可以添加到高图图表中的y轴最大数量是多少?

来自分类Dev

无法使用剑道图表将注释添加到categoryAxis

来自分类Dev

如何使用图表js显示图表

来自分类Dev

libuv是否提供任何工具将缓冲区附加到连接并重新使用

来自分类Dev

如何通过数据联接将多个x轴添加到d3图表?

来自分类Dev

将辅助轴添加到Excel图表会产生间隙

来自分类Dev

将缓冲区加到一个

来自分类Dev

我们可以使用图表控件绘制第三Y轴吗

来自分类Dev

在Streamlit中如何使用图表达在Y轴上绘制多个值(相同单位)?

Related 相关文章

  1. 1

    node.js将空终止的字符串添加到缓冲区

  2. 2

    node.js将空终止的字符串添加到缓冲区

  3. 3

    将列表缓冲区中的元素添加到地图中(更新地图)

  4. 4

    如何将列表项添加到字符串缓冲区?

  5. 5

    添加到协议缓冲区重复字段

  6. 6

    将轴名称添加到图表C#

  7. 7

    如何将辅助轴添加到highstock图表?

  8. 8

    将轴名称添加到图表C#

  9. 9

    如何使用MP图表获取选定的条形x轴名称(将字符串添加到x轴)?

  10. 10

    是否可以在vim中将特定的标记文件添加到特定的窗口/缓冲区?

  11. 11

    是否可以在vim中将特定的标记文件添加到特定的窗口/缓冲区?

  12. 12

    如何将月份作为 x 轴添加到股票图表/高价图表

  13. 13

    ffmpeg:将音频与混合音频添加到叠加过滤的视频时,会出现缓冲区队列溢出错误

  14. 14

    在特定位置将字符串添加到字符数组中,从而在 C 编程中导致缓冲区溢出

  15. 15

    如何在R>中使用双Y轴将图例添加到ggplot

  16. 16

    如何使用 xyplot 将条带标签添加到 y 轴

  17. 17

    将 d3.js 图表添加到 Wordpress

  18. 18

    为什么当我使用copy_from_user时,某些模糊字符添加到了原始缓冲区中?

  19. 19

    如何使用chart.js将图像作为标签添加到画布图表

  20. 20

    使用d3js将Jointplot添加到NBA射门图表

  21. 21

    可以添加到高图图表中的y轴最大数量是多少?

  22. 22

    无法使用剑道图表将注释添加到categoryAxis

  23. 23

    如何使用图表js显示图表

  24. 24

    libuv是否提供任何工具将缓冲区附加到连接并重新使用

  25. 25

    如何通过数据联接将多个x轴添加到d3图表?

  26. 26

    将辅助轴添加到Excel图表会产生间隙

  27. 27

    将缓冲区加到一个

  28. 28

    我们可以使用图表控件绘制第三Y轴吗

  29. 29

    在Streamlit中如何使用图表达在Y轴上绘制多个值(相同单位)?

热门标签

归档