如何将图表yAxis标签设置为xAxis分类的10%？

Absolutely! You can easily set your y-axis labels to be 10% of the x-axis categories in Highcharts—whether you're using pre-defined categories or fetching them dynamically from a server. Here's a practical, step-by-step solution:

1. For Pre-Defined Categories #

Modify your y-axis configuration to use a formatter function that references the x-axis categories and calculates their 10% value. We’ll also align the y-axis tick count with the number of x-axis categories to ensure each label maps correctly:

chart: { type: 'spline' },
xAxis: {
  categories: [1340, 1590, 1379, 1451, 1671]
},
yAxis: {
  title: { text: '10% of Range' },
  // Match tick count to x-axis category count
  tickPositions: Array.from({ length: 5 }, (_, i) => i),
  labels: {
    formatter: function() {
      // Convert category to number, calculate 10%, and format
      const xCategoryValue = Number(this.chart.xAxis[0].categories[this.pos]);
      return (xCategoryValue * 0.1).toFixed(1);
    }
  }
},
series: [{
  name: 'Tokyo',
  data: [7.0, 6.9, 9.5, 14.5, 18.4]
}]

2. For Dynamically Fetched Categories & Series #

When pulling data from a server, first retrieve the categories and series data, then configure the chart with the y-axis logic embedded:

// Replace with your actual API endpoint
fetch('/your-server-data-endpoint')
  .then(response => response.json())
  .then(fetchedData => {
    const xCategories = fetchedData.categories; // Numeric category array from server
    const seriesData = fetchedData.series; // Series data from server

    // Initialize chart with dynamic config
    Highcharts.chart('container', {
      chart: { type: 'spline' },
      xAxis: {
        categories: xCategories
      },
      yAxis: {
        title: { text: '10% of Range' },
        tickPositions: Array.from({ length: xCategories.length }, (_, i) => i),
        labels: {
          formatter: function() {
            const xCategoryValue = Number(this.chart.xAxis[0].categories[this.pos]);
            return (xCategoryValue * 0.1).toFixed(1);
          }
        }
      },
      series: seriesData
    });
  });

Quick Tips #

• If you want the actual y-axis tick values (not just label text) to equal 10% of x categories, adjust the tickPositions to use calculated values directly:

  tickPositions: xCategories.map(cat => Number(cat) * 0.1),
  labels: {
    formatter: function() {
      return this.value.toFixed(1);
    }
  }
  

• Use Number() to ensure category values are treated as numbers (since server-fetched categories might come as strings).
• toFixed(1) ensures labels match your example’s decimal format (e.g., 201.0, 201.1).

内容的提问来源于stack exchange，提问作者Yash Jain