Hicharts引入及水印去除

Hicharts引入及水印去除

希望本文可以帮助大家快速引入Hicharts，投入项目使用。

一、下载Hicharts代码包

• 下载地址：https://pan.baidu.com/s/1smzw3JB 密码：x02r
• 说明：网上有很多资源不完整，这是我经过拼凑之后形成的。

二、水印去除

• 修改highcharts.js

 credits: {
    enabled: false,//去掉水印
 }

• 修改highcharts-zh_CN.js

 exporting: {
    enabled:false,  //去掉导出
    url: protocol + '//export.highcharts.com.cn'
 },

三、Hicharts使用

• 所需包引入

<script type="text/javascript" src="commonWeb/scripts/highcharts/highcharts.js"></script>
<script type="text/javascript" src="commonWeb/scripts/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="commonWeb/scripts/highcharts/modules/exporting.js"></script>
<script type="text/javascript" src="commonWeb/scripts/highcharts/highcharts-plugins/highcharts-zh_CN.js"></script>

• 使用示例

    Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
        return {
            radialGradient: {
                cx: 0.4,
                cy: 0.3,
                r: 0.5
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
            ]
        };
    });
     var ch4_c2h4_c2h2Chart = getChart('ch4_c2h4_c2h2','ch4_c2h4_c2h2','x:ch4 y:c2h4 z:c2h2',data.ch4_c2h4_c2h2);
     addMouseEvents(ch4_c2h4_c2h2Chart);
     function getChart(divId,title,subtitle,dt){
        // Set up the chart
        var chart = new Highcharts.Chart({
            chart: {
                backgroundColor:'#011a31',
                renderTo: divId,
                margin: 100,
                type: 'scatter',
                options3d: {
                    enabled: true,
                    alpha: 10,
                    beta: 30,
                    depth: 250,
                    viewDistance: 5,
                    frame: {
                        bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
                        back: { size: 1, color: 'rgba(0,0,0,0.04)' },
                        side: { size: 1, color: 'rgba(0,0,0,0.06)' }
                    }
                }
            },
            title: {
                text: title,
                style:{
                     color: '#fff',
                     fontSize: '16px'
                }
            },
//            colors:['#4dd3b9'],
            subtitle: {
                text: subtitle,
                style:{
                    color: '#fff',
                    fontSize: '12px'
                }
            },
            plotOptions: {
                scatter: {
                    width: 10,
                    height: 10,
                    depth: 10
                }
            },
            yAxis: {
                min: dt.min[1],
                max: dt.max[1],
                title: null,
                labels : {
                    style : {
                        color: '#fff',
//                        fontSize : '18px'
                    }
                }
            },
            xAxis: {
                min: dt.min[0],
                max: dt.max[0],
                gridLineWidth: 1,
                labels : {
                    style : {
                        color: '#fff',
//                        fontSize : '18px'
                    }
                }
            },
            zAxis: {
                min: dt.min[2],
                max: dt.max[2],
                labels : {
                    style : {
                        color: '#fff',
//                        fontSize : '18px'
                    }
                }
            },
            legend: {
                data:[''],
                show:false,
                enabled: false,
             // 图例项样式
                itemStyle: {
                  color: '#fff'
                },

//                // 隐藏的图例项样式
//                itemHiddenStyle: {
//                  color: '#fff'
//                }
            },
            series: [{
                name: '',
                colorByPoint: true,
                data: dt.data
            }]
        });
        return chart;
    }

    function addMouseEvents(chart){
        // Add mouse events for rotation
        $(chart.container).bind('mousedown.hc touchstart.hc', function (e) {
            e = chart.pointer.normalize(e);
            var posX = e.pageX,
                posY = e.pageY,
                alpha = chart.options.chart.options3d.alpha,
                beta = chart.options.chart.options3d.beta,
                newAlpha,
                newBeta,
                sensitivity = 5; // lower is more sensitive
            $(document).bind({
                'mousemove.hc touchdrag.hc': function (e) {
                    // Run beta
                    newBeta = beta + (posX - e.pageX) / sensitivity;
                    newBeta = Math.min(100, Math.max(-100, newBeta));
                    chart.options.chart.options3d.beta = newBeta;
                    // Run alpha
                    newAlpha = alpha + (e.pageY - posY) / sensitivity;
                    newAlpha = Math.min(100, Math.max(-100, newAlpha));
                    chart.options.chart.options3d.alpha = newAlpha;
                    chart.redraw(false);
                },
                'mouseup touchend': function () {
                    $(document).unbind('.hc');
                }
            });
        });
    }

四、效果图