使用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-250px;max-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-250px;max-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 },