javascript - 启用 Highcharts 、高库存滚动

Question

我正在尝试绘制一个图表，其中每月更新金额不定期。默认情况下，我应该显示 18 个月的数据，并启用滚动条以在 18 个月后显示。将鼠标悬停在点上时，应该有一个工具提示，其中包含与该点相关的数据，而不是 x 和 y 值。在这里，我尝试使用 tooltip 但加载图表失败。这是jsfiddle 。我尝试过从网上做一些事情，但没有运气。任何解决方案都会有很大帮助。

引用:-

highchart

HTML:

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

脚本:

 $(function () {
    $('#container').highcharts({
        chart: {
            type: 'scatter',zoomType: 'xy',
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: ' '
        },
         scrollbar: {
        enabled: true,

    },
        xAxis: {
        ordinal: false,
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'renewal ammount(in Mn)'
            },
            min: 0
        },
        tooltip: {
            headerFormat: '<b>{series.name}</b><br>',
            pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: [{

            name: '0-1',

            // Define the data points. All series have a dummy year
            // of 1970/71 in order to be compared on the same x axis. Note
            // that in JavaScript, months start at 0 for January, 1 for February etc.
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        }, {
            name: '1-2',
            data: [

            [Date.UTC(2016,07,16),1.3],[Date.UTC(2018,06,18),1.3,,ww:'mydata'],[Date.UTC(2019,06,19),1.3,ww:'mydata'],[Date.UTC(2016,12,16),1.3,ww:'mydata'],[Date.UTC(2016,06,16),1.3,ww:'mydata'],[Date.UTC(2016,02,16),1.3,ww:'mydata'],         



            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '2-3',
            data: [

            [Date.UTC(2017,05,17),2.9],[Date.UTC(2016,03,16),2.1],[Date.UTC(2018,06,18),2.1],           



            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '3-4',
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        },{
            name: '4-5',
            data: [





            ],pointInterval: 30*24 * 3600 * 1000
        },]
    });
});

Answer 1

仅供澄清: 滚动条可与 highstock 配合使用。

如何使用？

1. <script src="https://code.highcharts.com/stock/highstock.js"></script>
2. 添加滚动条
3. 在 xAxis 下添加“min:XX”

检查:http://jsfiddle.net/mushigh/xjearL2z/

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>  

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


$(function() {
  $('#container').highcharts({


    chart: {
      type: 'line',
      zoomType: 'xy',
    },
    scrollbar: {
      enabled: true,
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
      min: 8
    },

    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
  });
});