Highcharts 多个 Y 轴?

时间:2021-02-24 23:13:38

标签: javascript highcharts

我刚刚开始 JavaScript 编程,想用漂亮的高图格式化我的数据。目前我通过谷歌电子表格获取我的数据。 我见过几个可以生成多个 Y 轴的示例。

他们总是从“系列:”中获取数据,我不明白我是如何将我的数据(来自电子表格)作为值获取的。

代码:

<head>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/data.js"></script>




  <script> 
document.addEventListener('DOMContentLoaded', function () {


  Highcharts.setOptions({
    chart: {
        backgroundColor: {
            linearGradient: [0, 0, 500, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 255)']
            ]
        },
        borderWidth: 0,
        //plotBackgroundColor: 'rgba(255, 255, 255, .9)',
        plotShadow: true,
        plotBorderWidth: 0
    }
});

var chart2 = new Highcharts.Chart({
    chart: {
        renderTo: 'container2',
        type: 'line',
        zoomType: 'x'
    },
    xAxis: {
        type: 'datetime'
    },
    data:{
      googleSpreadsheetKey: '1JaFCBmDR7kEOeE4W2FEb0875NCRbEdk3Gq7vnFt8zU0',
      endColumn: 3
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    xAxis: {
                type: 'datetime',
                crosshair: true
    },
    yAxis: [{
        lineWidth: 1,
        title: {
            text: 'Primary Axis'
        }
    }, {
        lineWidth: 1,
        opposite: true,
        title: {
            text: 'Secondary Axis'
        }
    }]
});
});
  </script>
  </head>
<body>
    <div id="container2" style="width:100%; height:400px;"></div>

</body>
</html>

我想如果我能弄清楚如何从方法电子表格中获取数据。它会有所帮助。我还想要列表中的最后一个值。

0 个答案:

没有答案