Highcharts 将默认文字更改为中文

小鱼儿 2023-10-06 12:46 69阅读 0赞

#### 1 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 2 实现代码 ####

<html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <script type="text/javascript" src="js/jquery.min.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
            <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
            <script type="text/javascript">
                $(function () {
                    var chart; 
                    $(document).ready(function() {
                        chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'container',
                                type: 'spline',
                            },
                            credits : {
                                enabled:false//不显示highCharts版权信息
                            },
                            exporting: {
                                buttons:{	//配置按钮选项
                                exportButton:{	//配置导出按钮
                                    width:50,
                                    symbolSize:20,
                                    borderWidth:2,
                                    borderRadius:0,
                                    hoverBorderColor:'red',
                                    height:30,
                                    symbolX:25,
                                    symbolY:15,
                                    x:-150,
                                    y:20
                                },
                            },
                            filename:'Chart title',//导出的文件名
                            type:'image/png',//导出的文件类型
                            width:800	//导出的文件宽度
                        },
                        lang: {
                            viewFullscreen:"全屏",
                            contextButtonTitle: "图表导出菜单",
                            decimalPoint: ".",
                            downloadJPEG: "下载JPEG图片",
                            downloadPDF: "下载PDF文件",
                            downloadPNG: "下载PNG文件",
                            downloadSVG: "下载SVG文件",
                            drillUpText: "返回 {series.name}",
                            loading: "加载中",
                            months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                            noData: "没有数据",
                            numericSymbols: ["千", "兆", "G", "T", "P", "E"],
                            printChart: "打印图表",
                            resetZoom: "恢复缩放",
                            resetZoomTitle: "恢复图表",
                            shortMonths: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                            thousandsSep: ",",
                            weekdays: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
                        },
                        xAxis: {
                            categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
                        },	  
                        series: [{
                                name: 'series1',
                                data: [2,4,5,9,2]
                            },{
                                name:'series2',
                                data:[3,5,7,2,1]
                            }]
                        });
                        $(".highcharts-button").each(function () {
                            $(this).hide();
                        });
                        $(".highcharts-contextbutton").each(function () {
                            $(this).show();
                        });
                    });
                });
            </script>
        </head>
        <body>
            <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        </body>
    </html>

#### 3 最终效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200710102118688.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200710143915371.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70