使用highcharts实现无其他信息纯趋势图实战实例

使用highcharts实现无其他信息纯趋势图实战实例

Highcharts去掉或者隐藏掉y轴的刻度线
yAxis : {
gridLineWidth: 0,
labels:{
//enabled:false//隐藏y轴刻度
},
}

Highcharts去掉或者隐藏掉x轴的刻度线
xAxis: {
categories: [],
tickWidth:0,
lineColor:'#ffffff',
lineWidth:0,
labels:{
enabled:false//隐藏x轴刻度
}
},
图表版权信息。显示在图表右下方的包含链接的文字，默认的文字是 Highcharts，链接是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

去掉highcharts右下角默认的网站url
右下角默认会有一个其网站url存在，这会影响美观，做如下设置即可去掉：
credits: {
enabled: false //不显示LOGO
},
===========================
Highcharts常规带坐标信息的趋势图示例demo：
https://jshare.com.cn/demos/hhhhxD/share/pure

===========================
highchart趋势图实战实例：

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>

<table class="count_table">
    <tr>
        <td id="m54_ct" algin="left" style="padding-right:20px;text-align:left;word-wrap:break-word;word-break:break-all;white-space:normal;">1,2,3,4,5,6</td>
        <td><div id="m54" style="min-width:250px;max-width:250px;height:170px"></div></td>
    </tr>
    <tr>
        <td id="m54_ct" algin="left" style="padding-right:20px;text-align:left;word-wrap:break-word;word-break:break-all;white-space:normal;">1,2,3,4,5,6</td>
        <td><div id="m53" style="min-width:250px;max-width:250px;height:170px"></div></td>
    </tr>
</table>

<script type="text/javascript">
$(document).ready(function() {
    setTimeout(showAllqushitu(), 1500);
});

function showAllqushitu(){
    showqushitu('m54');
    showqushitu('m53');
}

function showqushitu(idkey){
    var datalst = $('#'+idkey+"_ct").text();
//    console.log(datalst);
    datalst = datalst.substr(0,datalst.length-1);
    var datalsts = datalst.split(',').map(Number);//必须为数字的数组才行
    Highcharts.chart(idkey, {
        chart: {
            type: 'spline'
        },
        title: {
            text: '',
            align: 'left',
            x: 0
        },
        xAxis: {
            categories: [],
            tickWidth:0,
            lineColor:'#ffffff',
            lineWidth:0,
            labels:{
               enabled:false//隐藏x轴刻度
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 1,
            alternateGridColor: null,
            labels:{
                //enabled:false//隐藏y轴刻度
             },
            plotBands: []
        },
        tooltip: {
            valueSuffix: '个'
        },
        legend: {
           enabled: false
        },
        exporting: {
           enabled: false
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 1,
                pointStart: 1
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: '',
            data: datalsts
        }]
    });
}
</script>

效果图：

=====================

以下的测试代码，可参考使用：

<script type="text/javascript">
Highcharts.chart('m54', {
    chart: {
        type: 'spline'
    },
    title: {
        text: ''//标题
    },
    subtitle: {
        text: ''//副标题
    },
    xAxis: {
        type: 'string',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        title: {
            text: ''//开出个数
        },
        min: 0,
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [ {
            from: 0,
            to: 10,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '冷',
                style: {
                    color: '#606060'
                }
            }
        }, {
            from: 10,
            to: 15,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: '小热',
                style: {
                    color: '#606060'
                }
            }
        }, {
            from: 15,
            to: 20,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '大热',
                style: {
                    color: '#606060'
                }
            }
        }, {
            from: 20,
            to: 30,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: '狂热',
                style: {
                    color: '#606060'
                }
            }
        }]
    },
    tooltip: {
        valueSuffix: '个'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 1, // one hour
            pointStart: 1
        }
    },
    series: [{
        name: '期',//期数
        data: [23,22,22,22,22,22,21,20,19,19,18,18,18,18,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,19,19,19]
    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});
</script>

==========================

以下是测试代码二，可参考使用：

function showqushitu(idkey,datalst){
    datalst = datalst.substr(0,datalst.length-1);
    var datalsts = datalst.split(',').map(Number);
//     console.log(datalsts);
    Highcharts.chart(idkey, {
        chart: {
            type: 'spline'
        },
        title: {
            text: ''//标题
        },
        subtitle: {
            text: ''//副标题
        },
        xAxis: {
            type: 'string',
            labels: {
                overflow: 'justify'
            }
        },
        yAxis: {
            title: {
                text: ''//开出个数
            },
            min: 0,
            minorGridLineWidth: 0,
            gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [ {
                from: 0,
                to: 10,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: '冷',
                    style: {
                        color: '#606060'
                    }
                }
            }, {
                from: 10,
                to: 15,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: '小热',
                    style: {
                        color: '#606060'
                    }
                }
            }, {
                from: 15,
                to: 20,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: '大热',
                    style: {
                        color: '#606060'
                    }
                }
            }, {
                from: 20,
                to: 30,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: '狂热',
                    style: {
                        color: '#606060'
                    }
                }
            }]
        },
        tooltip: {
            valueSuffix: '个'
        },
        plotOptions: {
            spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },
                pointInterval: 1,
                pointStart: 1
            }
        },
        series: [{
            name: '',//期数
            data: datalsts
        }],
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
}

===========================
Highcharts折线图，去掉x轴y轴刻度与刻度名称

xAxis: {
        lineWidth:0,        //设置坐标宽度
        labels:{
           enabled:false
        }
      },
yAxis: {
       title:'',
       gridLineWidth: 0,    //设置横向分区线宽度
       lineColor:'#ffffff',//设置y轴颜色
       labels:{
           enabled:false
         }
       },
legend: {
       enabled: false
},
exporting: {
       enabled: false
},