如何使Chart.js X轴散点图精确地在最小/最大数据集值处开始和结束

mhd8tkvw 于 2023-03-02 发布在 Chart.js

关注(0)|答案(1)|浏览(139)

我创建了一个chart.js散点图模板，用红色节点来显示一个10个样本的实时滑动窗口图表。下面是随机生成数据的代码，其中x轴是时间戳。

<canvas id="line-chart3" width="800" height="450"></canvas>
<script>
  
new Chart(document.getElementById("line-chart3"), {
  type: 'scatter',
  data: {
    
    datasets: [{label:"ds1",data:[{x:1677246631553,y:31},{x:1677246631840,y:17},{x:1677246632077,y:31},{x:1677246632329,y:42},{x:1677246632552,y:38},{x:1677246632792,y:7},{x:1677246633017,y:13},{x:1677246633237,y:17},{x:1677246633472,y:35},{x:1677246633705,y:4}],backgroundColor:"#009900",borderColor:"#009900",steppedLine:false,fill:false,borderWidth:1}] 
      
  },
  options: {
    animation: false,
    scales: {
      x: {
        offset: false,
        ticks: {
          major: {
            enabled: false,
          },

        },
      }
    },

     
    
    title: { 
      display: true,
      text: 'Teste de grafico',
      
    }
  }
});
</script>

但图表显示如下图所示：

我希望x轴精确地从{x:1677246631553,y:31}开始，精确地在{x:1677246633472,y:35}（数据数组的最小值和最大值）结束，而不在网格的主要刻度处结束。
我使用的动态数据生成的节点红msg。有效载荷，所以，硬编码的最小值和最大值的x轴是不可能的。
我试过偏移、禁用主刻度和其他各种选项，但似乎都不起作用。
提前感谢您的帮助
让

chart.js

来源：https://stackoverflow.com/questions/75557584/how-to-make-chart-js-scatter-x-axis-chart-begin-and-end-exactly-at-minimum-maxim

1条答案

按热度按时间

gstyhher1#

可以在比例选项中指定min和max：

let data = [
          { x: 1677246631553, y: 31 },
          { x: 1677246631840, y: 17 },
          { x: 1677246632077, y: 31 },
          { x: 1677246632329, y: 42 },
          { x: 1677246632552, y: 38 },
          { x: 1677246632792, y: 7 },
          { x: 1677246633017, y: 13 },
          { x: 1677246633237, y: 17 },
          { x: 1677246633472, y: 35 },
          { x: 1677246633705, y: 4 }
        ] 
let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: "ds1",
        data: data,
        backgroundColor: "#009900",
        borderColor: "#009900",
      }
    ]
  },
  options: {
    animation: false,
    scales: {
      x: {
        min: data[0].x,
        max: data[data.length - 1].x,
      }
    }
  }
});

<script src="https://npmcdn.com/chart.js@4.2.1/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

赞(0）回复(0）举报 2023-03-02

我来回答

如何使Chart.js X轴散点图精确地在最小/最大数据集值处开始和结束

1条答案

相关问题

热门标签

最新问答