时间戳

首页 > 解决方案 > 如何隐藏 ChartJS 中未切换的图形标签

callback - 如何隐藏 ChartJS 中未切换的图形标签

问题描述

我在图表上显示价格数据，但有两个不同的时间尺度。

问题是当我切换较短的图表时，它仍然显示较长时间尺度的标签。

两条线的图像显示

显示问题线的图像

代码：

var ctx = document.getElementById('priceChart').getContext('2d');
var priceChart = new Chart(ctx, {
type: 'line',
data: {
    datasets: [

        {
            label: 'Price150s',
            data: [
                [{
                        "x": "20:32:39",
                        "y": 4325.04
                    },
                    {
                        "x": "20:32:42",
                        "y": 4324.91
                    },
                    {
                        "x": "20:32:45",
                        "y": 4325.17
                    },
                    {
                        "x": "20:32:48",
                        "y": 4325.02
                    }
                ]
            ],
            tension: 0.2,
            borderColor: 'rgb(231,62,62)'
        },

        {
            label: 'Price25m',
            data: [
                [{
                        "x": "20:32:39",
                        "y": 4325.04
                    },
                    {
                        "x": "20:32:42",
                        "y": 4324.91
                    },
                    {
                        "x": "20:32:45",
                        "y": 4325.17
                    },
                    {
                        "x": "20:32:48",
                        "y": 4325.02
                    }
                ]
            ],
            tension: 0.2,
            borderColor: 'rgb(231,62,62)'
        }
    ]
},
options: {
    responsive: true,
    legend: {
        display: false,
    },
    scales: {
        y: {
            beginAtZero: false
        }
    }
}
});

我知道您可以在单击时添加某种回调或隐藏详细信息，但是当您将字典用于 x 标签时，我找不到任何特定的东西。非常感谢您的帮助。

标签： callbackchart.js

解决方案

切换到时间刻度将以最简单的方式解决此问题，因为这是默认行为，如下例所示：

const options = {
  type: 'line',
  data: {
    datasets: [{
        label: '# of Votes',
        data: [{
            x: new Date('10-16-2021'),
            y: 1
          }, {
            x: new Date('10-18-2021'),
            y: 4
          }, {
            x: new Date('10-19-2021'),
            y: 8
          },
          {
            x: new Date('10-20-2021'),
            y: 6
          }
        ],
        borderColor: 'pink',
      },
      {
        label: '# of Points',
        data: [{
            x: new Date('10-18-2021'),
            y: 3
          }, {
            x: new Date('10-19-2021'),
            y: 9
          },
          {
            x: new Date('10-20-2021'),
            y: 4
          }
        ],
        borderColor: 'orange',
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</body>

推荐阅读