第四个 y 轴在 Highcharts 中不显示标签答案

【问题标题】：Fourth y axis does not show labels in Highcharts第四个 y 轴在 Highcharts 中不显示标签
【发布时间】：2018-09-28 20:08:40
【问题描述】：

我有一个绘制了 4 个系列的图表，我决定在图表的每一侧放置两个 y 轴，这很有效。我遇到的唯一麻烦是显示每个 y 轴的所有标签，特别是我命名为“Stuff Data”的系列中的最后一个，它显然是使用电压数据的 y 轴

请看： https://jsfiddle.net/Lprm4ofw/51/

我曾尝试切换系列和 yAxis 的顺序，但始终不会显示最后一个标签。我还尝试使用边距以防它被隐藏，但绝对不是。我可以尝试做些什么来解决它？这是代码：

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy',
        type: 'spline'
    },
    title: {
        text: 'Whatever'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],
      yAxis: [{ // Primary yAxis
            title: {
                text: 'Voltage',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
                        labels: {
                format: '{value} V',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true

        }, { // Secondary yAxis
            title: {
                text: 'Current',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} C',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
        },
        { // Third yAxis
              gridLineWidth: 0,
              title: {
                  text: 'Temperature',
                  style: {
                      color: Highcharts.getOptions().colors[3]
                  }
              },
              labels: {
                  format: '{value}°C',
                  style: {
                      color: Highcharts.getOptions().colors[3]
                  }
              },
          opposite: true

          },
          { // Fourth yAxis
                title: {
                    text: 'stuff',
                    style: {
                        color: Highcharts.getOptions().colors[4]
                    }
                },
                labels: {
                    format: 'WHEREAMI',
                    style: {
                        color: Highcharts.getOptions().colors[4]
                    }
                },

      }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 80,
        verticalAlign: 'top',
        y: 55,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [
     {
        name: 'Voltage Data',
        data: [10.0, 20.79, 13.5, 18.8],
        yaxis: 0,
    },
    {
        name: 'Current Data',
        yAxis: 1,
        data: [1, 2, 3 , 4],

    }, {
        name: 'Temperature Data',
        yAxis: 2,
        data: [4, 5, 6 , 9]

    }, {
        name: 'Stuff Data',
        data: [7.0, 6.9, 9.5],
        yaxis: 3,
    }]
});

【问题讨论】：

这是一个类型-o。第 4 轴上没有内容，因此没有显示标签。将yaxis: 3 更改为yAxis: 3。

标签： javascript highcharts

【解决方案1】：

您必须使用正确的属性名称，xaxis 与 xAxis 不同：

series: [
  {
    name: 'Voltage Data',
    data: [10.0, 20.79, 13.5, 18.8],
    yAxis: 0,
  },
  {
    name: 'Current Data',
    yAxis: 1,
    data: [1, 2, 3, 4],

  }, {
    name: 'Temperature Data',
    yAxis: 2,
    data: [4, 5, 6, 9]

  }, {
    name: 'Stuff Data',
    data: [7.0, 6.9, 9.5],
    yAxis: 3,
  }
]

现场演示：https://jsfiddle.net/BlackLabel/6wrahgko/

【讨论】：