Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/458.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Highcharts柱形图直方图在工具提示中显示x范围_Javascript_Highcharts - Fatal编程技术网

Javascript Highcharts柱形图直方图在工具提示中显示x范围

Javascript Highcharts柱形图直方图在工具提示中显示x范围,javascript,highcharts,Javascript,Highcharts,我正在使用highcharts柱形图创建直方图。(我无法使用直方图类型,因为我使用的是预聚合数据)。如何配置列的工具提示以显示列的日期范围而不是开始日期 Highcharts.chart('container'{ 图表:{ 类型:“列” }, xAxis:{ 键入:“日期时间” }, 亚克斯:{ 标题:{ 文本:“计数” } }, 工具提示:{ headerFormat:“{point.key}”, pointFormat:“{series.name}:”+ “{point.y}”, 页脚格式

我正在使用highcharts柱形图创建直方图。(我无法使用直方图类型,因为我使用的是预聚合数据)。如何配置列的工具提示以显示列的日期范围而不是开始日期

Highcharts.chart('container'{
图表:{
类型:“列”
},
xAxis:{
键入:“日期时间”
},
亚克斯:{
标题:{
文本:“计数”
}
},
工具提示:{
headerFormat:“{point.key}”,
pointFormat:“{series.name}:”+
“{point.y}”,
页脚格式:“”,
分享:是的,
useHTML:true
},
打印选项:{
系列:{
点间隔:24*3600000,//一天
起点:0,
pointPlacement:'between'
},
专栏:{
分组填充:0,
点填充:0
}
},
系列:[{
数据:[49,71,106,129,144,176,135,148,216,194,95,54]
}]
});
您可以使用计算要在工具提示中显示的点的范围

tooltip: {
  formatter () {
    const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
    const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x + 24 * 3600 * 1000)
    const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`

    const body = `<tr>
      <td style="color:${this.series.color};padding:0">${this.series.name}: </td>
      <td style="padding:0"><b>${this.y}</b></td>
    </tr>`

    const footer = '</table>'

    return header + body + footer
  },
工具提示:{
格式化程序(){
常量x1=Highcharts.dateFormat(“%Y-%m-%d”,this.x)
const x2=Highcharts.dateFormat(“%Y-%m-%d”,此.x+24*3600*1000)
常量头=`${x1}-${x2}`
常数体=`
${this.series.name}:
${this.y}
`
常量页脚=“”
返回页眉+正文+页脚
},
实时示例:

您可以使用计算要在工具提示中显示的点的范围

tooltip: {
  formatter () {
    const x1 = Highcharts.dateFormat('%Y-%m-%d', this.x)
    const x2 = Highcharts.dateFormat('%Y-%m-%d', this.x + 24 * 3600 * 1000)
    const header = `<span style="font-size:10px">${x1} - ${x2}</span><table>`

    const body = `<tr>
      <td style="color:${this.series.color};padding:0">${this.series.name}: </td>
      <td style="padding:0"><b>${this.y}</b></td>
    </tr>`

    const footer = '</table>'

    return header + body + footer
  },
工具提示:{
格式化程序(){
常量x1=Highcharts.dateFormat(“%Y-%m-%d”,this.x)
const x2=Highcharts.dateFormat(“%Y-%m-%d”,此.x+24*3600*1000)
常量头=`${x1}-${x2}`
常数体=`
${this.series.name}:
${this.y}
`
常量页脚=“”
返回页眉+正文+页脚
},

实例:

您可以使用工具提示格式化程序:@morganfree谢谢!不幸的是,您必须在格式化程序中计算结束日期,但这是一个可行的解决方案(可能是最好的解决方案)。用代码将其作为答案发布,我会接受。您可以使用工具提示格式化程序:@morganfree谢谢!很遗憾,您必须在格式化程序中计算结束日期,但这是一个可行的解决方案(可能是最好的)。用代码将其作为答案发布,我会接受。