Highcharts/highstock 设置 yAxis Min 和 Max 与 Scroll

debugcn 发表于 Dev

纳吉布·伊哈布

我有一个带有正负堆栈和水平滚动条的堆积柱形高库存图表。我试图根据最大数据和最小数据使 yAxis 具有最小值和最大值，因此我已经在 highstock 的 json 中设置了这些值（在计算它们之后）。

但是，xAxis 上用户名称的长度会覆盖这些最大值，有没有办法解决这个问题？

这是我的 js 小提琴：http : //jsfiddle.net/fj6d2/3931/

由于代码太大，无法在此贴出，这里是没有所有数据的配置：

Highcharts.chart('container', {

    "chart":{
   "type":"column"
},
"title":{
   "text":""
},
"xAxis":{
   "min":0,
   "max":31,
   "categories":[
      "Xxx Xxxx",
      "Xxx Xxxx",
      "Xxx Xxxx",
      "Xxx Xxxxx",
   ],
   "labels":{
      "style":{
         "font-size":"12px"
      },
      "useHTML":true,
      "events":{

      }
   }
},
"scrollbar":{
   "enabled":true,
   "barBackgroundColor":"gray",
   "barBorderRadius":7,
   "barBorderWidth":0,
   "buttonBackgroundColor":"gray",
   "buttonBorderWidth":0,
   "buttonArrowColor":"yellow",
   "buttonBorderRadius":7,
   "rifleColor":"yellow",
   "trackBackgroundColor":"white",
   "trackBorderWidth":1,
   "trackBorderColor":"silver",
   "trackBorderRadius":7
},
"yAxis":{
   "title":{
      "text":"Time (hh:mm)"
   },
   "tickInterval":600,
   "labels":{

   },
   "gridLineWidth":0,
   "plotLines":[
      {
         "value":0,
         "width":1,
         "color":"#000",
         "zIndex":4
      }
   ],
   "tickmarkPlacement":"on",
   "max":45336,
   "min":-21443
},
"plotOptions":{
   "column":{
      "stacking":"normal",
      "events":{

      }
   }
},
"credits":{
   "enabled":false
},
"tooltip":{
   "shared":true,
   "crosshairs":true
},
"legend":{
   "align":"right",
   "verticalAlign":"top",
   "itemStyle":{
      "display":"none"
   },
   "title":{
      "text":"Click a colour"
   }
},
"series":[
   {
      "name":"On Task Teacher Recommended",
      "data":[
         487,
         13512,
         10064,
         2664,
      ],
      "color":"#86E067",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"On Task Student Discovered",
      "data":[
         1276,
         5495,
         1307,
         3369,
      ],
      "color":"#5CB5E5",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"Uncategorised",
      "data":[
         944,
         12202,
         2920,
         4643,
      ],
      "color":"#F98157",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   },
   {
      "name":"Off Task",
      "data":[
         -126,
         -686,
         -1998,
         -927,

      ],
      "color":"#E3454D",
      "events":{

      },
      "point":{
         "events":false
      },
      "customEvents":{
         "series":{

         },
         "point":{

         }
      }
   }
]


});

深3015

您可以使用函数截断 highcharts 的长名称 (xAxis)

function truncString(str, max, add){
   add = add || '...';
   return (typeof str === 'string' && str.length > max ? str.substring(0,max)+add : str);
};

并调用这个函数 formatter

   "labels":{
        "formatter": function() {
                   return truncString(this.value,8,'...')
                },
      "style":{
         "font-size":"12px"
      },
      "useHTML":true,
      "events":{

      }
   }

小提琴演示