1. highcharts中的tooltip提示框中加一个显示当前日期并且格式为yyyy-mm-dd mm:ss:hh,如何实现呢
在highCharts对象中加入如下代码:
tooltip:{
formatter:function(){
varcontent='<spanstyle="font-size:10px;">'+this.x+'</span><b_r/>';
for(vari=0;i<this.points.length;i++){
content+='<spanstyle="color:'+this.points[i].series.color+'">'+this.points[i].series.name+'</span>:'+this.points[i].y+'<b_r/>';
};
vardate=newDate();
content+='<span>当前时间:'+date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDay()+''+(date.getMinutes()+1)+':'+(date.getSeconds()+1)+':'+(date.getHours()+1)+'</span>'
returncontent;
}
}
最后把<b_r/>中间的_去掉
2. highcharts时间轴是时间戳,怎么转换
1、函数构造:
Highcharts.dateFormat(String format, [Number time], [Boolean capitalize])
2、参数列表:
String format 格式化字符串,下面详细说明
Number time 需要格式化的时间戳,可选参数,留空则取当前时间
Boolean capitalize 返回结果是否大写(例如英文时间表示中的 Sunday, January 等),可选参数
3、返回值类型:String
4、format 格式化字符说明
参考文档:Highcharts 时间格式化函数
3. 怎么修改highcharts 时间选择的按钮
当你使用JavaScript图表工具Highcharts.Chart初始化图表,选项会是你的第一个参数。下面的代码(chart: {开始这一行)展现的为选项参数。
$(document).ready(function() {
varchart1 = newHighcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
为了能够熟练使用Hightcharts,理解选项如何工作,如何才能以编程方式更改非常重要。下面是一些主要的JavaScript对象概念。
Highcharts选项被定义为对象文字。通过这种方式配置,我们可以得到一个清晰的、可读性强的、低空间占用配置对象。下面的代码和C型语言背景下开发更为相似。
// Bad code:
varoptions = newObject();
options.chart = newObject();
options.chart.renderTo = 'container';
options.chart.type = 'bar';
options.series = newArray();
options.series[0] = newObject();
options.series[0].name = 'Jane';
options.series[0].data = newArray(1, 0, 4);
JavaScript对象文字可以写成下面这种形式。值得注意的是,两种选项都会得到往前相同的结果。
// Good code:
varoptions = {
chart: {
renderTo: 'container',
type: 'bar'
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}]
};
在上面的例子中选项对象自行创建,可以通过传递到图表函数被添加到图表。
$(document).ready(function() {
varchart = newHighcharts.Chart(options);
});
对象创建好后,我们可以用点记法扩大它的成员。x下面的代码添加了另外的系列。请记住ptions.series是一个数组,所以需要push method。
options.series.push({
name: 'John',
data: [3, 4, 2]
})
另外一种,在JavaScript对象中有用,点符号和方括号是一样的,因此,你可以通过他们的字符串名称访问所有成员。在代码中可以是options.renderTo,也可以是options['renderTo']
全局选项
如果你想要在同一页面设置全局,使用Highcharts.setOptions,代码如下:
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
varchart1 = newHighcharts.Chart({
chart: {
renderTo: 'container',
},
xAxis: {
type: 'datetime'
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
varchart2 = newHighcharts.Chart({
chart: {
renderTo: 'container2',
type: 'column'
},
xAxis: {
type: 'datetime'
},
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],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
});
4. highcharts颜色怎么修改
highcharts内部定义了一些颜色,如果用户没有显示的去设置颜色的,就会去内置专的颜色,设置的办法很属简单,你只需要加上一个这样的属性就行:
1
2
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572',
'#FF9655', '#FFF263', '#6AF9C4']
这里面就定义你自己想要的颜色就ok,有问题你都可以追问,没问题望采纳,谢谢,再送你一个api吧
5. highcharts在使用时,怎么把横坐标的时间(英文缩写)改为其他的内容(汉字)
修改Highcharts在js中的配置就可以控制了. 配置和图表的对应关系如下图
6. highcharts x轴可以写死时间吗一天24小时。
xAxis: {
lineColor: '#000',//x轴颜色
tickColor: '#000',//x轴字体颜色
// type: 'datetime',//时间轴上以毫秒为单位,添加这个表示你的x轴全部是时间,时间默认的是毫秒值
// maxZoom: XX * 24 * 3600000, // XX表示时间,*24表示一天24小时*3600000表示一小时多少毫秒,你的可以修改24、3600000这些数据试一试
categories:categories,//x轴上坐标值,categories这个表示你直接将x轴写死,它是你自己定义的一个数组,var categories = [];
},
7. 我们公司想用highcharts做报表,请问highcharts的开源等级是什么公司用它有什么限制吗
highcharts 官方网站有报价的
8. js的highcharts使用
highcharts对象的x轴如果为时间类型,则默认是时间递增的,如果出现了像LZ描述的这种情况,个人建议如下操作:
在series中只保存数值,而x轴信息则放到categories中,代码样例如下:
xAxis:{
categories:['2014-02-08','2014-02-09','2014-02-10','2014-02-11','2014-02-12'],
type:'category'
},
series:[{
data:[5,10,15,20,25]
}]
9. highcharts如何清除或者删除
在你所谓的‘点还原’操作时将饼图的charts隐藏,或者点柱形图按钮时也可进行这个操作
10. highcharts、highstock、highmaps三款软件有什么区别,如何收费,是否需要购买授权;
既然你会通过后台数据转换成json,然后在前台用来绑定后台的值的方式获得。那么多组的其实也是一样的,就是绑定的还是json值,只不过json的值是[{name:'John',data:[5,3,4,7,2]},{name:'Jane',data:[2,2,3,2,1]}]这种格式。就行了。这个在后台组好。