highcharts图表高级入门之polar：极地图的基本配置以及一些关键配置说明（转载）

来源：互联网发布：有了源码如何建站编辑：程序博客网时间：2024/05/17 07:32

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。 1、需要设置chart的polar属性为true；以表示是极地图； 2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

highcharts图表组件内的极地图polar的实现和效果都还是很简单和美观的。

1、需要设置chart的polar属性为true；以表示是极地图；

2、其他的设置和普通图表就没什么区别了的，这里附上一个完整的示例代码：

$(function () {    $('#container').highcharts({        chart: {  BackgroundColor:'#FFFF00',   plotBorderColor:'#FFE4B5',   //plotBackgroundColor:'#FFFF00',       polar: true,       type: 'line'    },        title: {        text: '测试结果只作为参考数值',        x: -50    },    pane: {    size: '70%'    },        xAxis: {        categories: [ '钙(单位:mg)','维生素D<br />(单位:IU)', 'DHA(单位:mg)', '维生素A<br />(单位:IU)'],labels: {                style: {                    color: 'red',                    fontSize:'8px'                }            },        tickmarkPlacement: 'on',        lineWidth: 0,gridLineColor:'#FFFF00',lineColor:'#24CBE5',    },            yAxis: {        gridLineInterpolation: 'polygon',        lineWidth: 0,gridLineColor:'#FFFF00',        min: 0,            labels:{                enabled:false //Y轴刻度值不显示            }    },        tooltip: {enabled: true,    shared: true,        pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'    },credits:{enabled: false,},        legend: {        align: 'center',        verticalAlign: 'top',enabled: false,        y: 70,        layout: 'vertical'    },exporting:{                      enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示                 },plotOptions: {        enabled: false,        allowPointSelect: false,    },        series: [{        name: '用户测试',        data: [200, 300, 400, 500], color: '#FF0000',        pointPlacement: 'on'    }, {        name: '标准',        data: [500, 500, 500, 500], color: '#FFF68F',        pointPlacement: 'on'    }]});});

注意：

1、如果不需要显示y轴刻度值，可以通过设置yAxis内的labels标签，如下所示：

labels:{                enabled:false //Y轴刻度值不显示}

2、如果不想显示数据点的提示框可以设置tooltip的enabled为false

tooltip: {enabled: false}

原文来自http://www.stepday.com/topic/?682，感谢原文作者分享

0 0