highcharts实现简单饼状图

本文介绍了如何利用highcharts库来实现简单的饼状图和柱状图的开发,并提供了在highcharts处理时间数据时的时间转换方法。
摘要由CSDN通过智能技术生成

highcharts实现简单饼状图

/**这是饼状图的展示*/
var zc=0;
var bj=0;
var lx=0;
if($("#countzc") !=0 && $("#countzc") !="0"){
    zc = ($("#countzc").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countbj") !=0 && $("#countbj") !="0"){
    bj = ($("#countbj").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
if($("#countlx") !=0 && $("#countlx") !="0"){
    lx = ($("#countlx").html()*1/($("#countzc").html()*1+$("#countbj").html()*1+$("#countlx").html()*1)).toFixed(2);
}
var sourcedata =[{'name':'正常','y':zc*1,'color':'green'},{'name':'报警','y':bj*1,'color':'red'},{'name':'离线','y':lx*1,color:'#666666'}];

pieChart(sourcedata);//调用传递数据


function pieChart(data) {
    $('#piePicture').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        },
        series: [{
            type: 'pie',
            name: ' ',
            data: data
        }]
    });
}

这是highcharts柱状图的简单实现

/**这是柱状图的展示*/
var sourcePie =[{'y':$("#source1").html()*1},{'y':$("#source2").html()*1},{'y':$("#source3").html()*1},{'y':$("#source4").html()*1},{'y':$("#source5").html()*1}];
histogramPicture(sourcePie);//这是调用传递参数



function histogramPicture(sourcePie) {
    $('#picutrePie').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: ' '
        },
        subtitle: {
            text: ' '
        },
        xAxis: {
            categories: [
                'I',
                'II',
                'III',
                'IV',
                'VI'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: ' ' //这是y轴的名称
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:f} 个</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0,                
            enabled:false
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '源数量',
            data: sourcePie

        }]
    });
}   

当highchasts需要用到时间的时候转换时间

Highcharts.setOptions({ global: { useUTC: false } });  
Highcharts可以通过使用“sankey”和“dependencywheel”模块来实现组织架构图。下面是一些示例代码和说明来帮助你开始: 1. Sankey图: ```javascript Highcharts.chart('container', { title: { text: 'Employee Flow' }, series: [{ type: 'sankey', keys: ['from', 'to', 'weight'], data: [ ['John', 'Jane', 5], ['John', 'Joe', 3], ['Jane', 'Joe', 2], ['John', 'Fred', 2], ['Jane', 'Fred', 4], ['Joe', 'Fred', 3] ], nodes: [{ id: 'John' }, { id: 'Jane' }, { id: 'Joe' }, { id: 'Fred' }], links: [{ source: 'John', target: 'Jane', value: 5 }, { source: 'John', target: 'Joe', value: 3 }, { source: 'Jane', target: 'Joe', value: 2 }, { source: 'John', target: 'Fred', value: 2 }, { source: 'Jane', target: 'Fred', value: 4 }, { source: 'Joe', target: 'Fred', value: 3 }] }] }); ``` 在上面的代码中,我们使用了“sankey”类型的系列,指定了“from”,“to”和“weight”键来表示数据。我们还为每个节点定义了一个“id”,并使用“links”数组来指定节点之间的关系。 2. Dependency Wheel图: ```javascript Highcharts.chart('container', { chart: { type: 'dependencywheel' }, title: { text: 'Employee Skills' }, series: [{ name: 'Skills', keys: ['from', 'to', 'weight'], data: [ ['John', 'HTML', 4], ['John', 'CSS', 3], ['John', 'JavaScript', 5], ['Jane', 'HTML', 5], ['Jane', 'CSS', 4], ['Jane', 'JavaScript', 2], ['Joe', 'HTML', 2], ['Joe', 'CSS', 3], ['Joe', 'JavaScript', 3] ], dataLabels: { color: '#333', textPath: { enabled: true, attributes: { dy: 5 } }, distance: 10 }, levels: [{ level: 1, color: 'silver', borderWidth: 2 }, { level: 2, colorByPoint: true, dataLabels: { style: { textShadow: false } } }], colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'], borderColor: '#999', borderWidth: 1 }] }); ``` 在上面的代码中,我们使用了“dependencywheel”类型的图表,指定了“from”,“to”和“weight”键来表示技能。我们还为每个技能定义了一个节点,并使用“dataLabels”属性来设置节点标签的样式和位置。我们还定义了两个级别,第一个级别的颜色为银色,第二个级别的颜色根据数据点的值自动设置。最后,我们使用“colors”属性来设置数据点的颜色,使用“borderColor”和“borderWidth”属性来设置边框的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值