highcharts 导航器未显示在Flutter腹板的high_chart中

qnyhuwrf  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(172)

我试着用high_chart: ^2.0.3库实现flutter chart。当实现的时候,导航器没有显示在图表上。我启用了导航器,但是图表只显示这样的。

navigator: {
        enabled: true      
},

我找的是这样的。

我这样添加图表数据字符串。

final String _chartData = '''{
chart: {
            type: 'spline'
        },
        title: {
            text: 'Snow depth at Vikjafjellet, Norway'
        },
        subtitle: {
            text: 'Irregular time data in Highcharts JS'
        },
        navigator: {
            enabled: true      
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%e. %b',
                year: '%b'
            },
            title: {
                text: 'Date'
            }
        },
        yAxis: {
            title: {
                text: 'Snow depth (m)'
            },
            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: 'Winter 2007-2008',
            data: [
                [Date.UTC(1970,  9, 27), 0   ],
               //data
            ]
        }, {
            name: 'Winter 2008-2009',
            data: [

                [Date.UTC(1971,  5,  7), 0   ]//data

            ]
        }, {
            name: 'Winter 2009-2010',
            data: [
                [Date.UTC(1970,  9,  9), 0   ],
               //data
            ]
        }],
}''';

我还为index.html文件添加了这个

<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/series-label.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/modules/export-data.js"></script> 
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

完整的源代码Here..

kwvwclae

kwvwclae1#

您只需加载Highstock,Highcharts已包含在Highstock中:

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script> 
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script> 
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>

现场演示:http://jsfiddle.net/BlackLabel/hnxvqpyj/
文件:https://www.highcharts.com/docs/stock/understanding-highcharts-stock

相关问题