夜微凉、的博客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  76 随笔 :: 24 文章 :: 22 评论 :: 24万 阅读
复制代码
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        //主要是通过 plotOptions 来设置区域显示
        plotOptions: { 
            area:{ 
                color:'#0055cc'
            },
            //设置区域的透明度 fillOpacity: num 最大为1
            series: {
                fillOpacity: 0.3
            }
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
        }]
    });
}); 

//项目实例
复制代码
$(function () {
     Highcharts.setOptions({
                        colors: ['#CCCCCC', '#1ab394']
                    });
                    $('#container').highcharts({
                        credits: {
                            enabled: false // 禁用版权信息
                        },
                        chart: {
                               renderTo: 'chart'
                        },
                        title: { text:'赛轮光伏电站发电量监控图'},xAxis: { categories:['2016-04-06','2016-04-01','2016-04-02','2016-04-03','2016-04-04','2016-04-05']},
                        yAxis: { 
                            title: {
                                text: 'kWh'
                            }
                        },
                        legend: { //【图例】位置样式 
                                backgroundColor: '#FFFFFF',
                                borderColor: '#CCC',
                                borderWidth: 1, 
                                shadow: true
                            },
                        plotOptions: { 
                            area: { 
                  //设置图表透明度为 0.2 fillOpacity:
0.2,
                  //设置线段的宽度为 0 lineWidth:
0, marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } }, shadow: false, states: { hover: { lineWidth: 1 } }, threshold: null }, scatter: { marker: { symbol: 'triangle-down' } } },series: [ { name: '发电量90%-115%', data: [16497,16285,10273,8481,15752,15562], type: 'area', color: 'rgba(0,148,48,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量70%-90%', data: [12910.63,12744.5,8039.63,6637.14,12327.33,12178.66], type: 'area', color: 'rgba(230,193,78,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量0%-70%', data: [10041.6,9912.39,6253.05,5162.22,9587.92,9472.29,], type: 'area', color: 'rgba(211,2,5,1)', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '模拟发电量', data: [22069.46,21785.46,13742.96,11345.54,21072.36,20818.23],marker: {symbol:'triangle-down'}, type: 'scatter', color: '#d57e1f', tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } }, { name: '发电量', data:[{color:'rgba(236,27,30,1)','y':5555},{color:'rgba(236,27,30,1)','y':9373.7},{color:'rgba(236,27,30,1)','y':4161.79},{color:'rgba(236,27,30,1)','y':4138.98},{color:'rgba(236,27,30,1)','y':8364.81},{color:'rgba(236,27,30,1)','y':8217.1}], type: 'column', showInLegend: false, tooltip: { headerFormat: '<b>{series.name}</b><br>', pointFormat: '{point.y} kWh', } } ] }) });
复制代码

 

 
复制代码

 

posted on   夜、微凉  阅读(3147)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
点击右上角即可分享
微信分享提示