如何不显示Highcharts的GMT和时区标签

时间:2015-10-01 06:26:57

标签: highcharts

如下图所示: enter image description here

而不是我希望x轴标签看起来像这样:

enter image description here

没有GMT和时区。对不起,我是Highcharts的新手!

编辑:添加代码

SecureTransport.h

mySeriestemp和yearSeries都来自我使用的数组:

Highcharts.theme = {
              colors: ["#2b908f", "#90ee7e", "#f45b5b", "#7798BF", "#aaeeee", "#ff0066", "#eeaaee",
                 "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
              chart: {
                  backgroundColor: {
                      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                      stops: [
                         [0, '#2a2a2b'],
                         [1, '#3e3e40']
                      ]
                  },
                  style: {
                      fontFamily: "'Unica One', sans-serif"
                  },
                  plotBorderColor: '#606063'
              },
              title: {
                  style: {
                      color: '#E0E0E3',
                      textTransform: 'uppercase',
                      fontSize: '20px'
                  }
              },
              subtitle: {
                  style: {
                      color: '#E0E0E3',
                      textTransform: 'uppercase'
                  }
              },
              xAxis: {

                  type: 'datetime',
                  dateTimeLabelFormats: {
                      month: '%e. %b'
                  },

                  gridLineColor: '#707073',
                  labels: {
                      style: {
                          color: '#E0E0E3'
                      }
                  },
                  lineColor: '#707073',
                  minorGridLineColor: '#505053',
                  tickColor: '#707073',
                  title: {
                      style: {
                          color: '#A0A0A3'

                      }
                  }
              },
              yAxis: {
                  gridLineColor: '#707073',
                  labels: {
                      style: {
                          color: '#E0E0E3'
                      }
                  },
                  lineColor: '#707073',
                  minorGridLineColor: '#505053',
                  tickColor: '#707073',
                  tickWidth: 1,
                  title: {
                      style: {
                          color: '#A0A0A3'
                      }
                  }
              },
              tooltip: {
                  backgroundColor: 'rgba(0, 0, 0, 0.85)',
                  style: {
                      color: '#F0F0F0'
                  }
              },
              plotOptions: {
                  series: {
                      dataLabels: {
                          color: '#B0B0B3'
                      },
                      marker: {
                          lineColor: '#333'
                      }
                  },
                  boxplot: {
                      fillColor: '#505053'
                  },
                  candlestick: {
                      lineColor: 'white'
                  },
                  errorbar: {
                      color: 'white'
                  }
              },

              credits: {
                  style: {
                      color: '#666'
                  }
              },
              labels: {
                  style: {
                      color: '#707073'
                  }
              },

              drilldown: {
                  activeAxisLabelStyle: {
                      color: '#F0F0F3'
                  },
                  activeDataLabelStyle: {
                      color: '#F0F0F3'
                  }
              },

              navigation: {
                  buttonOptions: {
                      symbolStroke: '#DDDDDD',
                      theme: {
                          fill: '#505053'
                      }
                  }
              },


              navigator: {
                  handles: {
                      backgroundColor: '#666',
                      borderColor: '#AAA'
                  },
                  outlineColor: '#CCC',
                  maskFill: 'rgba(255,255,255,0.1)',
                  series: {
                      color: '#7798BF',
                      lineColor: '#A6C7ED'
                  },
                  xAxis: {
                      gridLineColor: '#505053'
                  }
              },

              scrollbar: {
                  barBackgroundColor: '#808083',
                  barBorderColor: '#808083',
                  buttonArrowColor: '#CCC',
                  buttonBackgroundColor: '#606063',
                  buttonBorderColor: '#606063',
                  rifleColor: '#FFF',
                  trackBackgroundColor: '#404043',
                  trackBorderColor: '#404043'
              },

              global: {
                  useUTC: false
              },


              // special colors for some of the
              legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
              background2: '#505053',
              dataLabelsColor: '#B0B0B3',
              textColor: '#C0C0C0',
              contrastTextColor: '#F0F0F3',
              maskColor: 'rgba(255,255,255,0.3)'
          };

          Highcharts.setOptions(Highcharts.theme);


                ////////////////////
          $('#high').highcharts({

              chart: {
                  borderColor: '#EBBA95',
                  borderRadius: 20,
                  borderWidth: 2,
                  zoomType: 'x',
                  spacingTop: 40
              },



              title: {
                  text: 'Humidity/Temperature Graph',
                  x: -20, //center
                  y: 5
              },
              subtitle: {
                  text: 'Elemental Electronics | Click and drag to zoom',
                  x: -20,

              },
              xAxis: {

                  type: 'datetime',
                  dateTimeLabelFormats: {
                      month: '%e. %b'
                  },

                  categories: yearSeries,

              },


              yAxis: {
                  title: {
                      text: 'All points on one graph'
                  },


                  plotBands: [
                      {
                          color: 'orange', // Color value
                          from: 0, // Start of the plot band
                          to: -25 // End of the plot band
                          ,label: {
                              text: 'Lower Range: 1 ppm',
                              color: '#ffffff',
                              align: 'left'

                          }

                      },
                         {
                             label: {
                                 text: 'Upper Range: 5ppm',
                                 color: '#ffffff',
                                 align: 'left'

                             },

                             color: 'orange', // Color value
                             from: 75, // Start of the plot band
                             to: 100// End of the plot band
                         }




                  ],

              },
              tooltip: {
                  valueSuffix: '°C'
              },

              series: [ 

              {
                  name: 'Temperature',
                  textColor: '#ffffff',
                  data: mySeriestemp
              }


              ],

          });
      });

2 个答案:

答案 0 :(得分:1)

<强>更新 在我看到您的代码时,您需要添加以下内容

 labels: {

    formatter: function() {
    return Highcharts.dateFormat('%e. %b', this.value);
    }

请参阅working fiddle with your code

使用此

  xAxis: {

        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b'
        }
    }

答案 1 :(得分:1)

需要在此处添加

格式化程序功能以显示所需格式的标签

labels: {
formatter: function() {
return Highcharts.dateFormat('%e. %b', this.value);
}