Chart.js 3.7.1删除左边的刻度

gmxoilav 于 2023-06-22 发布在 Chart.js

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

如何关闭从0到45000的额外标记，我在屏幕截图中突出显示的刻度？我已经尝试了一切可能的方法。似乎有可能将chartjs更新到最新版本，但我感兴趣的可能性在版本3.7.1中纠正行为，还有一个问题，在最上面的点，100%的标签与这个点的值为100被切断，直到我也找到了如何修复它。
选项：

export const chartOptions: ICustomChartOptions = {
  responsive: true,
  layout: {},
  elements: {
    bar: {
      borderRadius: 4,
    },
    line: {
      borderWidth: 3,
    },
    point: {
      backgroundColor: '#FFFFFF',
      borderWidth: 2,
      radius: 4,
    },
  },
  clip: false,
  scales: {
    x: {
      grid: {
        display: false,
      },
      ticks: {
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100000,
    },
    y: {
      position: 'left',
      grid: {
        drawBorder: false,
      },
      ticks: {
        callback: function (value) {
          return `${value}%`;
        },
        stepSize: 25,
        font: {
          size: 10,
        },
      },
      min: 0,
      max: 100,
      beginAtZero: true,
    },
  },
  plugins: {},
};

UPD：这是图表的数据

export const chartData: ChartData<'line'> = {
  labels: chartLabels,
  datasets: [
    {
      type: 'line',
      // yAxisID: 'line',
      data: [100, 20, 49, 10, 97],
      order: 1,
      datalabels: {
        anchor: 'start',
        align: 'end',
        color: color['Purple/Purple 80'],
        formatter(value) {
          return `${value}%`;
        },
      },
    },
    {
      type: 'bar' as 'line',
      yAxisID: 'bar',
      data: [22000, 17500, 12000, 10000, 44000],
      order: 2,
      datalabels: {
        align: 'end',
      },
    },
  ],
};

UPD 2对于显示值，我使用ChartDataLabels

chart.js

来源：https://stackoverflow.com/questions/76507156/chart-js-3-7-1-remove-the-scale-on-the-left-with-values

1条答案

按热度按时间

iswrvxsc1#

如果没有数据，就不能确定第二个轴是如何形成的，但我假设它是mixed chart的type: "bar"部分的轴。因此，数据可能是以下行中的内容（我将省略输入，因为这太不精确了）：

const data = {
   labels: [....],
   datasets: [
       {
          type: "line",
          label: "....",
          data: [.....]
       },
       {
          type: "bar",
          label: "....",
          data: [.....]
       },
   ]
}

在这种情况下，您必须为两个部分设置y轴id，并在选项中为您不想显示的轴设置display: false：

const data = {
   labels: [....],
   datasets: [
       {
          type: "line",
          label: "....",
          data: [.....],
          yAxisID: "y"
       },
       {
          type: "bar",
          label: "....",
          data: [.....],
          yAxisID: "y2"
       }
   ]
};

const chartOptions = {
   //....... other options
   scales:{
      x: { 
         // .... options for the x axis
      },
      y: { 
         // .... options for the y axis 
      },
      y2:{
         display: false,
         // ... other y2 options, if any
      }
   }
}

下面是一个代码片段，其中包含执行此操作的代码的最小版本：

const data = {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [
        {
            label: 'lines',
            data: [100, 20, 40, 50, 90, 44, 29],
            type: 'line',
            order: 1,
            yAxisID: 'y'
        },
        {
            label: 'bars',
            data: [10009, 2000, 4000, 5000, 9000, 4400, 2900],
            type: 'bar',
            order: 0,
            yAxisID: 'y2'
        }
    ]
};

const options = {
    scales:{
        y: {
            beginAtZero: false,
            //grace: "2%"
        },
        y2: {
            display: false,
        }
    },
    layout: {
        padding: {top: 10} // to fit the label
    }
}
new Chart(document.getElementById('chart1'), {data, options});

<div style="height: 100%; width:100%">
<canvas id="chart1"  style="height: 90vh; width:95vw"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

至于适合的标签，再次，我们不知道你是如何添加它们。您可以尝试：

options.layout.padding.top文档链接（参见上面的示例），
options.scales.y.grace文档链接（在上面的示例中注解）
或者根据数据简单地增加y比例的最大值（max）。

赞(0）回复(0）举报 2023-06-22

我来回答

Chart.js 3.7.1删除左边的刻度

1条答案

相关问题

热门标签

最新问答