Javascript Highcharts设置从上午12点开始到晚上11点结束的xAxis值
我正在使用highcharts插件，我的目标是按小时绘制全天的图表 如何将xAxis设置为使用12小时格式（w/AM&PM），开始=>一天结束。或者选择间隔3小时 例如，我为Javascript Highcharts设置从上午12点开始到晚上11点结束的xAxis值,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,我正在使用highcharts插件，我的目标是按小时绘制全天的图表 如何将xAxis设置为使用12小时格式（w/AM&PM），开始=>一天结束。或者选择间隔3小时 例如，我为今天和昨天 我的数据，如下所示（时间戳和值）： 以下是我的完整脚本： $(function(){ var moneySign = "$"; Highcharts.setOptions({ lang: { thousandsSep: ',' } });
今天昨天 $(function(){
var moneySign = "$";
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
// Sales Chart
var SalesChart = Highcharts.chart('ba-chart-sales', {
title: { text: '' },
exporting: { enabled: false },
subtitle: { text: '' },
yAxis: {
title: { text: '' },
useHTML: true,
labels: {
formatter: function() {
return moneySign + this.axis.defaultLabelFormatter.call({
axis: this.axis,
value: this.value
});
}
}
},
xAxis: {
// Default for 7days & 30days (will change for today||yesterday)
type: 'datetime',
dateTimeLabelFormats: { day: '%b %e' },
tickInterval: 24 * 3600 * 1000 // interval of 1 day
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled:false
},
tooltip: {
dateTimeLabelFormats: { day: '%B %e, %Y' },
shared: true,
useHTML: true,
headerFormat: '{point.key}<div>',
pointFormat: '<div style="background-color: #0549d1; height: 10px; width: 10px; border-radius: 50%; display: inline-block;"></div>' +
'<div style="margin-left: 5px; margin-top: 8px; width:30px; display: inline-block;"><b> ' + moneySign + '{point.y}</b></div>',
footerFormat: '</div>',
crosshairs: {
color: '#ccc',
className: 'chart-crosshair',
dashStyle: 'solid',
width: 1
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
marker: {
enabled: false,
symbol: 'circle'
}
}
},
series: [{
tooltip: { xDateFormat: '%B %e, %Y' },
showInLegend: false,
name: '',
data: []
}],
responsive: rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}],
credits: { enabled: false }
});
// Initial
var SalesChartExtremes = SalesChart.yAxis[0].getExtremes();
// Change Cart Type `line` || `column`
function reDrawChart(filter, chart) {
var series = SalesChart.series[0];
var newType = ['today', 'yesterday'].includes(filter) ? 'column' : 'line';
series.chart.addSeries({
type: newType,
name: series.name,
color: series.color,
data: series.options.data,
}, false);
series.remove();
}
// Get Offer Analytics Data
function getAnalytics(filter=''){
$.ajax({
type: "GET",
url: "<%= analytics_url %>",
data: {chart_filter: filter},
dataType: "JSON",
success: function(data){
var todayLocalDate = "<%= @local_time.strftime("%Y-%m-%d") %>".split('-').map(Number);
var yesterdayLocalDate = "<%= @local_time.yesterday.strftime("%Y-%m-%d") %>".split('-').map(Number);
if( ['30', '7', ''].includes(filter) ){
var toolTipProp = { xDateFormat: '%B %e, %Y' };
var pointIntervalProp = 24 * 3600 * 1000; // one day
var pointStartProp = '';
var chartType = 'line';
}else{
if (filter == 'today'){
var pointStartProp = Date.UTC(todayLocalDate[0], todayLocalDate[1], todayLocalDate[2]);
}else if (filter == 'yesterday'){
var pointStartProp = Date.UTC(yesterdayLocalDate[0], yesterdayLocalDate[1], yesterdayLocalDate[2]);
}
var toolTipProp = { xDateFormat: '%B %e, %Y %I:%M%p' };
var pointIntervalProp = 3600000 * 3; // 3 hours
var chartType = 'column';
}
var markerEnabled = data.sales.length == 1
var salesOpts = {
tooltip: toolTipProp,
data: data.sales,
animation: { duration: 1000 },
pointInterval: pointIntervalProp,
pointStart: pointStartProp,
crosshair: true,
marker: {
enabled: markerEnabled
}
}
// Sets yAxis min & max values for empty result
if(data.sales.length == 0){
SalesChart.yAxis[0].setExtremes(0,100);
SalesChart.yAxis[0].update({tickInterval: 20});
}else{
// return to previous categories based on data
SalesChart.yAxis[0].setExtremes(SalesChartExtremes.min, SalesChartExtremes.max);
SalesChart.yAxis[0].update({tickInterval: 500});
}
if(filter == 'today' || filter == 'yesterday'){
var defaultTimeOpt = {
tickInterval: 1,
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%l:%M:%S.%L %P',
second: '%l:%M:%S %P',
minute: '%l:%M %P',
hour: '%l:%M %P',
day: '(%e. %b) %l:%M %P'
}
}
SalesChart.xAxis[0].update(defaultTimeOpt, true);
}else{
// return to day options
var defaultDayOpt = {
type: 'datetime',
dateTimeLabelFormats: { day: '%b %e' },
tickInterval: 24 * 3600 * 1000 // interval of 1 day
}
SalesChart.xAxis[0].update(defaultDayOpt, false);
}
SalesChart.series[0].update(salesOpts, true);
reDrawChart(filter, 'sales');
},
error: function(data) {
flashError("Error getting analytics");
}
});
return false;
}
});
// Call getAnalytics when select dropdown filter change (e.g. today, yesterday, lastweek ...)
getAnalytics();
$（函数（）{
var moneySign=“$”；
Highcharts.setOptions({
朗：{
千塞普：'，'
}
});
//销售图表
var SalesChart=Highcharts.chart（'ba-chart-sales'{
标题：{文本：'}，
正在导出：{enabled:false}，
副标题：{文本：'}，
亚克斯：{
标题：{文本：'}，
是的，
标签：{
格式化程序：函数（）{
return moneySign+this.axis.defaultLabelFormatter.call({
轴：这个轴，
值：这个值
});
}
}
},
xAxis：{
//默认为7天和30天（将更改为今天| |昨天）
键入：“日期时间”，
dateTimeLabelFormats:{day:'%b%e'}，
间隔时间：24*3600*1000//间隔1天
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：'中间'，
已启用：false
},
工具提示：{
dateTimeLabelFormats:{day:'%B%e，%Y'}，
分享：是的，
是的，
headerFormat:“{point.key}”，
点格式：“”+
''+moneySign+'{point.y}'，
页脚格式：“”，
十字准星：{
颜色：“#ccc”，
类名：“图表十字线”，
dashStyle:'实心'，
宽度：1
}
},
打印选项：{
系列：{
标签：{
允许的连接器：false
},
标记：{
启用：false，
符号：“圆圈”
}
}
},
系列：[{
工具提示：{xDateFormat:'%B%e，%Y'}，
showInLegend:false，
名称：“”，
数据：[]
}],
响应：规则：[{
条件：{
最大宽度：600
},
图表选项：{
图例：{
布局：“水平”，
对齐：'居中'，
垂直排列：“底部”
}
}
}],
信用证：{已启用：错误}
});
//首字母
var SalesChartExtremes=SalesChart.yAxis[0].getExtremes（）；
//更改购物车类型'line`| ``列`
函数重绘图表（过滤器、图表）{
var series=SalesChart.series[0]；
var newType=['today'，'Dayed'].包括（筛选器）-'column'：'line'；
series.chart.addSeries({
类型：newType，
名称：series.name，
颜色：series.color，
数据：series.options.data，
}，假）；
系列。删除（）；
}
//获取报价分析数据
函数getAnalytics（过滤器=“”）{
$.ajax({
键入：“获取”，
url:“”，
数据：{chart_filter:filter}，
数据类型：“JSON”，
成功：功能（数据）{
var todayLocalDate=“.split（'-'）.map（编号）；
var yesterdayLocalDate=”“.split（'-'）.map（编号）；
如果（['30'，'7'，''）。包括（筛选器））{
var toolTipProp={xDateFormat:“%B%e，%Y'}；
var pointIntervalProp=24*3600*1000；//一天
var pointStartProp=''；
var chartType='行'；
}否则{
如果（过滤器==“今天”）{
var pointStartProp=Date.UTC（todayLocalDate[0]，todayLocalDate[1]，todayLocalDate[2]）；
}else if（过滤器==“昨天”）{
var pointStartProp=Date.UTC（yesterdayLocalDate[0]，yesterdayLocalDate[1]，yesterdayLocalDate[2]）；
}
var-toolTipProp={xDateFormat:“%B%e，%Y%I:%M%p'}；
var pointIntervalProp=3600000*3；//3小时
var chartType='列'；
}
var markerEnabled=data.sales.length==1
var salesOpts={
工具提示：工具提示，
数据：data.sales，
动画：{持续时间：1000}，
pointInterval:pointIntervalProp，
pointStart:pointStartProp，
十字准星：没错，
标记：{
已启用：标记已启用
}
}
//为空结果设置yAxis最小值和最大值
if（data.sales.length==0）{
SalesChart.yAxis[0].setextrems（0100）；
SalesChart.yAxis[0]。更新（{tickInterval:20}）；
}否则{
//根据数据返回到以前的类别
SalesChart.yAxis[0].setextrems（saleschartextrems.min，saleschartextrems.max）；
SalesChart.yAxis[0]。更新（{tickInterval:500}）；
}
if（filter==“今天”| filter==“昨天”）{
var defaultTimeOpt={
时间间隔：1，
键入：“日期时间”，
日期时间标签格式：{
毫秒：“%l:%M:%S.%l%P”，
第二个：“%l:%M:%S%P”，
分钟：“%l:%M%P”，
小时数：“%l:%M%P”，
日期：“（%e.%b）%l:%M%P”
}
}
SalesChart.xAxis[0]。更新（defaultTimeOpt，true）；
}否则{
//返回日选项
var defaultDayOpt={
键入：“日期时间”，
dateTimeLabelFormats:{day:'%b%e'}，
间隔时间：24*3600*1000//间隔1天
}
SalesChart.xAxis[0]。更新（defaultDayOpt，false）；
}
SalesChart.series[0]。更新（salesOpts，true）；
重画图表（过滤“销售”）；
},
错误：函数（数据）{
闪光器（“获取分析的错误”）；
}
});
返回false；
}
});
$(function(){
var moneySign = "$";
Highcharts.setOptions({
lang: {
thousandsSep: ','
}
});
// Sales Chart
var SalesChart = Highcharts.chart('ba-chart-sales', {
title: { text: '' },
exporting: { enabled: false },
subtitle: { text: '' },
yAxis: {
title: { text: '' },
useHTML: true,
labels: {
formatter: function() {
return moneySign + this.axis.defaultLabelFormatter.call({
axis: this.axis,
value: this.value
});
}
}
},
xAxis: {
// Default for 7days & 30days (will change for today||yesterday)
type: 'datetime',
dateTimeLabelFormats: { day: '%b %e' },
tickInterval: 24 * 3600 * 1000 // interval of 1 day
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
enabled:false
},
tooltip: {
dateTimeLabelFormats: { day: '%B %e, %Y' },
shared: true,
useHTML: true,
headerFormat: '{point.key}<div>',
pointFormat: '<div style="background-color: #0549d1; height: 10px; width: 10px; border-radius: 50%; display: inline-block;"></div>' +
'<div style="margin-left: 5px; margin-top: 8px; width:30px; display: inline-block;"><b> ' + moneySign + '{point.y}</b></div>',
footerFormat: '</div>',
crosshairs: {
color: '#ccc',
className: 'chart-crosshair',
dashStyle: 'solid',
width: 1
}
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
marker: {
enabled: false,
symbol: 'circle'
}
}
},
series: [{
tooltip: { xDateFormat: '%B %e, %Y' },
showInLegend: false,
name: '',
data: []
}],
responsive: rules: [{
condition: {
maxWidth: 600
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}],
credits: { enabled: false }
});
// Initial
var SalesChartExtremes = SalesChart.yAxis[0].getExtremes();
// Change Cart Type `line` || `column`
function reDrawChart(filter, chart) {
var series = SalesChart.series[0];
var newType = ['today', 'yesterday'].includes(filter) ? 'column' : 'line';
series.chart.addSeries({
type: newType,
name: series.name,
color: series.color,
data: series.options.data,
}, false);
series.remove();
}
// Get Offer Analytics Data
function getAnalytics(filter=''){
$.ajax({
type: "GET",
url: "<%= analytics_url %>",
data: {chart_filter: filter},
dataType: "JSON",
success: function(data){
var todayLocalDate = "<%= @local_time.strftime("%Y-%m-%d") %>".split('-').map(Number);
var yesterdayLocalDate = "<%= @local_time.yesterday.strftime("%Y-%m-%d") %>".split('-').map(Number);
if( ['30', '7', ''].includes(filter) ){
var toolTipProp = { xDateFormat: '%B %e, %Y' };
var pointIntervalProp = 24 * 3600 * 1000; // one day
var pointStartProp = '';
var chartType = 'line';
}else{
if (filter == 'today'){
var pointStartProp = Date.UTC(todayLocalDate[0], todayLocalDate[1], todayLocalDate[2]);
}else if (filter == 'yesterday'){
var pointStartProp = Date.UTC(yesterdayLocalDate[0], yesterdayLocalDate[1], yesterdayLocalDate[2]);
}
var toolTipProp = { xDateFormat: '%B %e, %Y %I:%M%p' };
var pointIntervalProp = 3600000 * 3; // 3 hours
var chartType = 'column';
}
var markerEnabled = data.sales.length == 1
var salesOpts = {
tooltip: toolTipProp,
data: data.sales,
animation: { duration: 1000 },
pointInterval: pointIntervalProp,
pointStart: pointStartProp,
crosshair: true,
marker: {
enabled: markerEnabled
}
}
// Sets yAxis min & max values for empty result
if(data.sales.length == 0){
SalesChart.yAxis[0].setExtremes(0,100);
SalesChart.yAxis[0].update({tickInterval: 20});
}else{
// return to previous categories based on data
SalesChart.yAxis[0].setExtremes(SalesChartExtremes.min, SalesChartExtremes.max);
SalesChart.yAxis[0].update({tickInterval: 500});
}
if(filter == 'today' || filter == 'yesterday'){
var defaultTimeOpt = {
tickInterval: 1,
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%l:%M:%S.%L %P',
second: '%l:%M:%S %P',
minute: '%l:%M %P',
hour: '%l:%M %P',
day: '(%e. %b) %l:%M %P'
}
}
SalesChart.xAxis[0].update(defaultTimeOpt, true);
}else{
// return to day options
var defaultDayOpt = {
type: 'datetime',
dateTimeLabelFormats: { day: '%b %e' },
tickInterval: 24 * 3600 * 1000 // interval of 1 day
}
SalesChart.xAxis[0].update(defaultDayOpt, false);
}
SalesChart.series[0].update(salesOpts, true);
reDrawChart(filter, 'sales');
},
error: function(data) {
flashError("Error getting analytics");
}
});
return false;
}
});
// Call getAnalytics when select dropdown filter change (e.g. today, yesterday, lastweek ...)
getAnalytics();
xAxis: {
labels: {
//isPm() is a function that checks for am and pm of your timestamp
format: '{value} ' + (isPm() ? "pm":"am")
}
}
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%l:%M:%S.%L %P',
second: '%l:%M:%S %P',
minute: '%l:%M %P',
hour: '%l:%M %P',
day: '(%e. %b) %l:%M %P',
}
}