Highcharts做柱状图怎样样每个柱子都是不同的颜色显示 - 航宇 - 博客园
series: [{
data: [{'color':'#F6BD0F','y':11},
{'color':'#AFD8F8','y':12},
{'color':'#8BBA00','y':13},
{'color':'#FF8E46','y':14},
{'color':'#008E8E','y':15},
{'color':'#D64646','y':16},
{'color':'#8E468E','y':17}],highcharts图表常见问题：关于如何设置数据点起始位置为坐标原点的问题分析与总结篇（独家爆料）
highcharts图表常见问题：关于如何设置数据点起始位置为坐标原点的问题分析与总结篇（独家爆料）
[摘要：/topic/?923 多开大神@站少 供应！！！ 从应用highcharts图表最先到往常也睹证了良多应用者不停迷惑着如许一个题目：若何才干够设置第一个数据面从坐标本面]
/topic/?923
多谢大神@站长 提供！！！
从使用highcharts图表开始到如今也见证了很多使用者一直困惑着这样一个问题：如何才能够设置第一个数据点从坐标原点开始？要在什么条件下才能够从原点开始画？
针对这样一个问题，我一直没有过多地去深入了解，今天也正式有一个朋友遇到这样一个问题。所以，决定将自己的使用心得总结如下。
1、尚未设置xAxis的categories
在我们尚未设置任何categories数据的情况下，让图表自动给x轴分配刻度，你会发现我们不设置任何xAxis的其他属性，第一个数据点在x轴上的位置就是在原点位置。
2、当我们人为设置了xAxis的categories
一旦设置了categories数据过后，不管你设置了xAxis的min、minRange、minPadding 均为0也无济于事，第一个数据点与Y轴的距离还是有一些。
变相思考：
1、不设置categories，其实就是自动给x轴刻度分配了0、1、2、3、n的刻度值和刻度角标一样的。
2、我们想要的无非是想将我们自己的刻度显示在x轴上和tooltip内。
3、那么我们何不巧用xAxis的labels的formatter格式化方法来做这个刻度的真正变换呢？
实际操作：
1、如何让y轴方向上从原点开始？
想要让数据点从原点开始，需要做的就是要控制数据点的x轴方向和y轴方向。关于y轴方向的控制，我们只需要配置两个属性即可：
1）、startOnTick:用于设置是否显示开始刻度，默认为true，我们需要设置此属性值为false。
2）、minPadding：用于设置最小值与X轴的距离值，默认为非0，我们需要设置此属性值为0。
示例配置代码：
yAxis: { minPadding:0, startOnTick:false },
2、如何让X轴方向上从原点开始？
根据前面”变相思考“小结，我们需要这样做：
1）、将categories定义成为一个一维数组。
var categories =
['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
2）、巧用labels的formatter格式化方法根据当前刻度值角标去categories数组内对应获取想要体现的刻度值。
formatter: function() {
return categories[this.value];
3）、为了让刻度不出现间断效果，我们在设置一下刻度间隔属性tickInterval为1
formatter: function() {
return categories[this.value];
tickInterval:1
这样一来，我们就可以完美体现不管xAxis的categories是什么数据均可将其第一个数据点设置为从原点开始。
晒上一张效果图：
完整示例代码如下所示：
$(function () {
var categories =
['一月', '二月', '三月',
'四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
$('#container').highcharts({
formatter: function() {
return categories[this.value];
tickInterval:1
minPadding:0,
startOnTick:false
color:&red&
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
在线Demo查看下载：http://jsfiddle.net/stepday/yVG7R/
【另一种可行的方式】：
tickInterval:1
lineWidth:1,
minPadding:0,
plotLines: [{
color: '#;
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊> highcharts中x轴的刻度的距离怎么设置
highcharts中x轴的刻度的距离怎么设置
gms898 & &
发布时间： & &
浏览：34 & &
回复：3 & &
悬赏：0.0希赛币
highcharts中x轴的刻度的距离如何设置highcharts 中
x轴的刻度的距离如何设置，是否存在该属性，查找资料很久了，也没有解决。着急等待中
gmwqf001 & &
& & （0）（0）xAxis:{&
}& }& 你可通过设置labels里面的step属性X轴显示的间隔。
gmx1984 & &
& & （0）（0）探讨不对
我要的是 刻度的距离
不是 ”显示的方式各几个显示信息“
你们有QQ没 跟你们弄个图
我不会在希赛上加图gmx200406 & &
& & （0）（0）
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&&&增值电信业务经营许可证湘B2-404 Not Found!!!Highcharts xAxis events事件 categories动态取值 -
- ITeye技术网站
博客分类：
研究了一下Highcharts有关x轴点击事件的方法，官网api上说明：events{setExtremes:}，无详细示例，去英文网站()，这篇文章说明了解决方法，我去研究了一下，果然可以。关键代码如下：
plotOptions: {
cursor: 'pointer',
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
headingText: this.series.name,
maincontentText: '值：' + this.y +':&br/&时间：'+
Highcharts.dateFormat('%Y-%m-%e %H:%M:%S', this.x),
width: 200
window.setTimeout(function(){
var src = "&%= path%&/singins.do?method=forwardToColumn"; //柱状图页面
var title = "柱状图页面";
var returnVal = oncl_openWin(src,title,"30","300","480","840");
window.location.reload();
//一秒钟后跳转
lineWidth: 1
Windows.showModalDialog方法：
function oncl_openWin(src,title,dtop,dleft,dheight,dwidth){
var rtObj =window.showModalDialog(src+"&random="+Math.random(),title,
"status:dialogTop:"+dtop+"dialogLeft:"+dleft+"dialogHeight:"+dheight+"dialogwidth:"+dwidth+"scroll=yes");
return rtO
效果是点击图表上某个点，数据显示1秒钟后跳转到柱状图页面。这样，采取了另外一个方法实现x时间点点击跳转。至今好像直接在xAxis里设置events属性，无任何反应。
Highcharts柱状图中的
categories: [
要实现动态数据获取，可以直接定义一个js数组，用Jquery动态从后台取数据之后，push到数组中就行了，关键代码如下：
var url = "&%=basePath%&/singins.do?method=getDataToColumnJson";
type: "post",
cache: false,
dataType: "json",
ifModified: false,
success: function(result){
var xdata= [];
jQuery.each(result, function(m, obj) {
xdata.push(m+1); //动态取值
options.xAxis.categories =
//push完之后赋值
chart = new Highcharts.Chart(options);
浏览 16018
浏览: 41456 次
来自: 上海
楼主，我这里突然出现一个问题， 就是 hs.htmlExpan ...
我想问下楼主，你的动态图每次刷新，图是从底端重新画的，还是在原 ...}