在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如图，我用了ECharts的这个柱状图，下面x轴的数字太密集了，能不能让x轴的坐标间隔一个显示数字？
axisTick: {
show: false
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
interval: 5,
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value}',
textStyle: {
color: 'rgba(255,255,255,0.7)'
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0.2)'
show: true,
data: ['0%', '', '10%', '', '20%', '', '30%', '', '40%', '', '50%', '', '60%', '', '70%', '', '80%', '', '90%', '', '100%']
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以设置x轴文字出现的频率的，比如隔两个显示一个（axisLabel = {interval: 3};），具体设置见文档。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
建议使用这个方法 axisLabel:{rotate:-30} 换个角度思考问题
横着放不下可以竖着放，当然也可以斜着放 这就是我要说的这个方法。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：效果图展示
画面上的jsp实现
&div id=&chart&&
&!-- BAR CHART --&
&div class=&box box-success&&
&div class=&box-header&&
&h3 class=&box-title&&Bar Chart&/h3&
&div class=&box-body chart-responsive&&
&div class=&chart& id=&bar-chart& style=&height: 300&&&/div&
&/div&&!-- /.box-body --&
&/div&&!-- /.box --&
&!-- LINE CHART --&
&div class=&box box-info&&
&div class=&box-header&&
&h3 class=&box-title&&Line Chart&/h3&
&div class=&box-body chart-responsive&&
&div class=&chart& id=&line-chart& style=&height: 300&&&/div&
&/div&&!-- /.box-body --&
&/div&&!-- /.box --&
&!-- DONUT CHART --&
&div class=&box box-danger&&
&div class=&box-header&&
&h3 class=&box-title&&Donut Chart&/h3&
&div class=&box-body chart-responsive&&
&div class=&chart& id=&sales-chart& style=&height: 300 position:&&&/div&
&/div&&!-- /.box-body --&
&/div&&!-- /.box --&
&/div&&!-- --chart --&
jsp中引入相应的js文件
&!-- Morris.js charts --&
&script src=&static/js/odm/pages/factory/main/raphael-min.js&&&/script&
&script src=&static/js/odm/pages/factory/main/morris.js&&&/script&
&script src=&static/js/odm/pages/factory/main/morrisData.js&&&/script&
morrisData.js的实现
$(function() {
&use strict&;
//BAR CHART
var bar = new Morris.Bar({
element: 'bar-chart',
resize: true,
{year: '1111', a: 15, b: 5},
{year: '2222', a: 5, b: 25},
{year: '3333', a: 35, b: 5},
{year: '4444', a: 5, b: 45},
{year: '5555', a: 55, b: 5},
{year: '6666', a: 5, b: 65},
{year: '7777', a: 71, b: 2}
barColors: ['#00a65a', '#f56954'],
xkey: 'year',
ykeys: ['a', 'b'],
ymax: 'auto 100',
units: '',
labels: ['CPU', 'DISK'],
hideHover: 'true',
hoverFillColor:'#00a65a'
// LINE CHART
var line = new Morris.Line({
element: 'line-chart',
resize: true,
{year: ';, data: 1000},
{year: ';, data: 8000},
{year: ';, data: 6000},
{year: ';, data: 4000},
{year: ';, data: 5000},
{year: ';, data: 6000},
{year: ';, data: 7000},
{year: ';, data: 6000},
{year: ';, data: 8000},
{year: ';, data: 10000},
{year: ';, data: 8000},
{year: ';, data: 10000}
xkey: 'year',
ykeys: ['data'],
labels: ['数据1'],
lineColors: ['#3c8dbc'],
hideHover: 'true'
//DONUT CHART
var donut = new Morris.Donut({
element: 'sales-chart',
resize: true,
colors: [&#3c8dbc&, &#f56954&, &#00a65a&],
{label: &Download Sales&, value: 50},
{label: &In-Store Sales&, value: 30},
{label: &Mail-Order Sales&, value: 20}
hideHover: 'true'
參數選項說明：
element(必填)
描述： 要放置圖表的區塊 ID、DOM 或是物件
預設值： 無
data(必填)
描述： 要繪製成圖表的資料來源，需要一個物件陣列(物件的屬性並沒有特別的限制，只要把要顯示的 x 及 y 軸設定在 xkey 及 ykey 中就可以。不過 x 基本上是要是時間格式)
預設值： 無
xkey(必填)
描述： 對應 data 物件陣列中物件的 x 軸(時間可以允許有 2012, 2012 Q1, 2012 W1, 2012-02, 2012-02-24, 2012-02-24 15:00, 2012-02-24 15:00:00, 2012-02-24 15:00:00.000 等格式，建議查看 dateFormat 參數)
預設值： 無
ykeys(必填)
描述： 對應 data 物件陣列中物件的 y 軸(不管要對應幾個都要用陣列的方式來設定)
預設值： 無
labels(必填)
描述： 對應 ykeys 的描述名稱
預設值： 無
lineWidth(選填)
描述： 線的寬度；單位 px
預設值： 3
pointSize(選填)
描述： 點(資料結點)的直徑；單位 px
預設值： 4
lineColors(選填)
描述： 線及點的顏色陣列
預設值： ['#0b62a4', '#7A92A3', '#4da74d', '#afd8f8', '#edc240', '#cb4b4b', '#9440ed']
ymax(選填)
描述： y 軸的最大值。可以設定 'auto' 讓 morris.js 自動計算，或者是設成 'auto 數字' 來確保最大值有到指定的數字
預設值： 'auto'
ymin(選填)
描述： y 軸的最小值。可以設定 'auto' 讓 morris.js 自動計算，或者是設成 'auto 數字' 來確保最小值至少有到指定的數字(可以利用 ymin 設定來產生空白點)
預設值：'auto 0'
smooth(選填)
描述： 預設線是有點弧度的效果；若設為 false 則線會用直線的方式表示
預設值： true
hideHover(選填)
描述： 預設滑鼠移出圖表時提示框不會隱藏；若設為 true 則當滑鼠移出圖表就立即隱藏
預設值： false
parseTime(選填)
描述： 預設會依 data 的 x 軸值來產生相對應時間的間距；若設為 false 則把每個時間點都設成一樣的間距
預設值： true
units(選填)
描述： y 軸值的單位(例如 %)
預設值： ''
dateFormat(選填)
描述： 把毫秒時間轉成日期字串用
預設值： function (x) { return new Date(x).toString(); }
其他公開的參數選項說明：
marginTop(必填)
描述： 圖表區塊的上方邊距
預設值： 25
marginRight(必填)
描述： 圖表區塊的右邊邊距
預設值： 25
marginBottom(必填)
描述： 圖表區塊的下方邊距
預設值： 30
marginLeft(必填)
描述： 圖表區塊的左邊邊距
預設值： 25
numLines(必填)
描述： 圖表 y 軸要切成幾等份
預設值： 5
gridLineColor(選填)
描述： 圖表 y 軸要切成幾等份的線的顏色
預設值： '#aaa'
gridTextColor(選填)
描述： 圖表 x 及 y 軸的上的文字顏色
預設值： '#888'
gridTextSize(選填)
描述： 圖表 x 及 y 軸的上的文字大小；單位 px
預設值： 12
gridStrokeWidth(選填)
描述： 圖表 y 軸要切成幾等份的線的寬度；單位 px
預設值： 0.5
hoverPaddingX(選填)
描述： 提示訊息框的左右內文距
預設值：10
hoverPaddingY(選填)
描述： 提示訊息框的上下內文距
預設值： 5
hoverMargin(選填)
描述： 提示訊息框的邊距
預設值： 10
hoverFillColor(選填)
描述： 提示訊息框的背景顏色
預設值： '#fff'
hoverBorderColor(選填)
描述： 提示訊息框的邊框顏色
預設值： '#ccc'
hoverBorderWidth(選填)
描述： 提示訊息框的邊框寬度
預設值： 2
hoverOpacity(選填)
描述： 提示訊息框的不透明度
預設值： 0.95
hoverLabelColor(選填)
描述： 提示訊息框的文字顏色
預設值： '#444'
hoverFontSize(選填)
描述： 提示訊息框的文字大小
預設值： 12
方法說明：
// 產生圖表
Morris.Line(options);
&script type=&text/javascript& src=&jquery.js&&&/script&
&script type=&text/javascript& src=&raphael.js&&&/script&
&script type=&text/javascript& src=&morris.js&&&/script&
&script type=&text/javascript&&
$(function(){
// 圖表的資料
var data = [
{&period&: &2011 Q3&, &licensed&: 3407, &sorned&: 660},
{&period&: &2011 Q2&, &licensed&: 3351, &sorned&: 629},
{&period&: &2011 Q1&, &licensed&: 3269, &sorned&: 618},
{&period&: &2010 Q4&, &licensed&: 3246, &sorned&: 661},
{&period&: &2010 Q3&, &licensed&: 3257, &sorned&: 667},
{&period&: &2010 Q2&, &licensed&: 3248, &sorned&: 627},
{&period&: &2010 Q1&, &licensed&: 3171, &sorned&: 660},
{&period&: &2009 Q4&, &licensed&: 3171, &sorned&: 676},
{&period&: &2009 Q3&, &licensed&: 3201, &sorned&: 656},
{&period&: &2009 Q2&, &licensed&: 3215, &sorned&: 622},
{&period&: &2009 Q1&, &licensed&: 3148, &sorned&: 632},
{&period&: &2008 Q4&, &licensed&: 3155, &sorned&: 681},
{&period&: &2008 Q3&, &licensed&: 3190, &sorned&: 667},
{&period&: &2007 Q4&, &licensed&: 3226, &sorned&: 620},
{&period&: &2006 Q4&, &licensed&: 3245, &sorned&: null},
{&period&: &2005 Q4&, &licensed&: 3289, &sorned&: null},
{&period&: &2004 Q4&, &licensed&: 3263, &sorned&: null},
{&period&: &2003 Q4&, &licensed&: 3189, &sorned&: null},
{&period&: &2002 Q4&, &licensed&: 3079, &sorned&: null},
{&period&: &2001 Q4&, &licensed&: 3085, &sorned&: null},
{&period&: &2000 Q4&, &licensed&: 3055, &sorned&: null},
{&period&: &1999 Q4&, &licensed&: 3063, &sorned&: null},
{&period&: &1998 Q4&, &licensed&: 2943, &sorned&: null},
{&period&: &1997 Q4&, &licensed&: 2806, &sorned&: null},
{&period&: &1996 Q4&, &licensed&: 2674, &sorned&: null},
{&period&: &1995 Q4&, &licensed&: 1702, &sorned&: null},
{&period&: &1994 Q4&, &licensed&: 1732, &sorned&: null}
// 產生圖表, 資料來源為 data
// x 軸為 period, y 軸為 ['licensed', 'sorned']
Morris.Line({
element: 'graph',
data: data,
xkey: 'period',
ymax: 'auto 5000',
ykeys: ['licensed', 'sorned'],
labels: ['Licensed', 'SORN']
&div id=&graph&&&/div&
参考：/mayswind/p/3806883.html
本文已收录于以下专栏：
相关文章推荐
jquery图表插件
原文出处：http://blog.csdn.net/anxpp/article/details/
    本人租用的云服务器，为了节约成本，各项配置都是比较低的，但是又运行了很多的服...
说到二叉树遍历，通常想到的是递归算法或者通过
Morris.js 是一个轻量级的 JS 库，使用 jQuery 和 Raphaël 来生成各种时序图。
虽说现在移动手机网络已经到了4G，但是在移动web客户端开发过中，为了达到良好的体验效果，需要...
(1)Horizontal accordion: jQuery
基于jQuery开发，非常简单的水平方向折叠控件。
二手图书 二手书 特价书 旧书网
1、先序遍历public static void printPreOrder(TreeNode node) {
Queue queue = new LinkedList();
WPF中用于绘图的类主要有三个，分别是Shape类、Drawing类和DrawingVisual类，Shape类存在于System.Windows.Shapes命，而Drawing类和DrawingV...
他的最新文章
讲师：刘文志
讲师：陈伟
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)