时间戳

首页 > 解决方案 > 如何删除 Bar Chartjs 中的左侧数值？

charts - 如何删除 Bar Chartjs 中的左侧数值？

问题描述

在 Stackoverflow 上的文档或其他问题中，我找不到有关如何删除左侧数字键盘的信息（并且有可能）。如何删除以便只保留图表？

对于 Stack：'看起来你的帖子主要是代码；请添加更多细节。'看起来你的帖子主要是代码; 请添加更多细节。

在此处输入图像描述

function myChart() {
      const densityCanvas = document.getElementById('myChart')
    
      Chart.defaults.global.defaultFontFamily = 'Segoe UI'
      Chart.defaults.global.defaultFontSize = 11
    
      const densityData = {
        label: '',
        data: [5427, 5243, 5514, 3933],
        backgroundColor: '#123ce1',
        borderWidth: 0,
        yAxisID: 'y-axis-density',
      }
    
      const gravityData = {
        label: '',
        data: [3.7, 8.9, 9.8, 3.7],
        backgroundColor: '#4f7afe',
        borderWidth: 0,
        yAxisID: 'y-axis-gravity',
      }
    
      const planetData = {
        labels: ['Mercury', 'Venus', 'Earth', 'Mars'],
        datasets: [densityData, gravityData],
      }
    
      const chartOptions = {
    
        scales: {
          xAxes: [{
            barPercentage: 1,
            categoryPercentage: 0.3,
          }, ],
          yAxes: [{
              id: 'y-axis-density',
            },
            {
              id: 'y-axis-gravity',
            },
          ],
        },
      }
    
      const barChart = new Chart(densityCanvas, {
        type: 'bar',
        data: planetData,
        options: {
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              barPercentage: 1,
              categoryPercentage: 0.3,
            }, ],
            yAxes: [{
                id: 'y-axis-density',
              },
              {
                id: 'y-axis-gravity',
              },
            ],
          },
        },
      })
    }
    myChart()

JSFiddle

标签： chartshighchartschart.js

解决方案

试试这样：

function myChart() {
  const densityCanvas = document.getElementById('myChart')

  Chart.defaults.global.defaultFontFamily = 'Segoe UI'
  Chart.defaults.global.defaultFontSize = 11

  const densityData = {
    label: '',
    data: [5427, 5243, 5514, 3933],
    backgroundColor: '#123ce1',
    borderWidth: 0,
    yAxisID: 'y-axis-density',
  }

  const gravityData = {
    label: '',
    data: [3.7, 8.9, 9.8, 3.7],
    backgroundColor: '#4f7afe',
    borderWidth: 0,
    yAxisID: 'y-axis-gravity',
  }

  const planetData = {
    labels: ['Mercury', 'Venus', 'Earth', 'Mars'],
    datasets: [densityData, gravityData],
  }

  const chartOptions = {

    scales: {
      xAxes: [{
        barPercentage: 1,
        categoryPercentage: 0.3,
      }, ],
      yAxes: [{
          id: 'y-axis-density',
        },
        {
          id: 'y-axis-gravity',
        },
      ],
    },
  }

  const barChart = new Chart(densityCanvas, {
    type: 'bar',
    data: planetData,
    options: {
      legend: {
        display: false
      },
      scales: {
        xAxes: [{
          barPercentage: 1,
          categoryPercentage: 0.3,
        }, ],
        yAxes: [{
            id: 'y-axis-density',
            display: false
          },
          {
            id: 'y-axis-gravity',
            display: false
          },
        ],
      },
    },
  })
}
myChart()
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
<canvas id="myChart"></canvas>

在此页面上，有一个示例显示了以下设置以显示单个 y 轴：

yAxes: [{
   display: true
}]

推荐阅读