如何在 HighCharts 的一张图表上设置多个 y 轴坐标？

Question

再次更新 - 现在我添加了 yAxis 属性，但它什么也没显示：

$('#highchart').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: 'My Data'
    },
    subtitle: {
        text: 'By Day'
    },
    xAxis: {
        categories: date_arr
    },
    yAxis: [{title: {text: 'PV'}}, 
            {title: {text: 'UPV'}}, 
            {title: {text: 'PPV'},opposite: true}
    ],
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: true
        }
    },
    series: [{
        name: 'PV',
        data: pv_arr,
        yAxis:1
    },
    {
      name:'UPV',
      data:upv_arr,
      yAxis:2
    },
    {
      name:'PPV',
      data:ppv_arr,
      yAxis:3
    }
    ]
});

它什么都不会显示——实际上什么都不会，甚至图表的标题也不会。而是一个空白区域。

更新 - 现在我正在使用它但仍然无法正常工作......

$('#highchart').highcharts({
    chart: {
        type: 'line'
    },
    title: {
        text: 'My Data'
    },
    subtitle: {
        text: 'By Day'
    },
    xAxis: {
        categories: date_arr
    },
    yAxis: [{title: {text: 'PV'}}, 
            {title: {text: 'UPV'}}, 
            {title: {text: 'PPV'},opposite: true}
    ],
    plotOptions: {
        line: {
            dataLabels: {
                enabled: false
            },
            enableMouseTracking: true
        }
    },
    series: [{
        name: 'PV',
        data: pv_arr
    },
    {
      name:'UPV',
      data:upv_arr
    },
    {
      name:'PPV',
      data:ppv_arr
    }
    ]
});

是这样的（新标签已经准备好，但指标仍然是旧方式）：

-- 原帖--

我正在使用 HighCharts 为网站访问者显示一些数据

在上图中。蓝色和深蓝色线非常大，因为它们是页面访问。绿色的是页面浏览量/独特的页面浏览量。与访问次数相比，这是一个非常小的数字。如何像 Microsoft Excel 那样设置第二个 y 轴系统？

顺便说一句，x轴上的日期太拥挤了，有没有办法让它们自动保持在一行？ （有时只有 7 天的数据）

谢谢

Answer 1

您可以定义 yAxis 数组，然后在每个系列中设置轴的索引。

    yAxis: [{ 
        title: {
            text: 'yAxis 1',
        },
    }, { 
        title: {
            text: 'yAxis 2',
        },
        opposite: true
    }],

示例： - http://www.highcharts.com/demo/combo-multi-axes

您还可以通过选项 alignTicks 禁用 align ticks。

chart: {
        alignTicks: false
},

Answer 2

参考这个Fiddle，它有三个yAxis来显示三个堆叠的系列

对于标签相关的问题，您可以使用 tickInterval 在间隔后显示日期

xAxis: {

  tickInterval: 24 * 3600 * 1000// One day (change here whatever you prefer)
 }

如果您的标签相互折叠，您可以使用 xAxis 中的 staggerLines 属性将备用标签向下显示。