Highcharts - 无法将样式应用于x轴标签

我正在使用Highcharts，并且无法通过我的主题应用x轴标签样式......如果我在创建图表时应用它，它会正常工作..但主题选项似乎只能在x轴上被忽略。相同的样式适用于y轴。Highcharts - 无法将样式应用于x轴标签

下面的代码。谢谢！

主题

Highcharts.theme = { 
    chart: { 
     zoomType: 'x' 
    }, 
    plotOptions: { 
     column: { 
      borderColor: null, 
      borderWidth: 1, 
      borderRadius: 3, 
      shadow: true 
     }, 
     line: { 
      lineWidth: 3, 
      shadow: false, 
      marker: { 
       radius: 10 
      } 
     } 
    }, 
    xAxis: { 
     gridLineColor: '#ebebeb', 
     lineColor: '#ebebeb', 
     minorGridLineColor: '#ebebeb', 
     tickColor: '#ebebeb', 
     plotLines: [{ 
      color: '#ebebeb' 
     }], 
     showLastLabel: true, 
     labels: { 
      style: { 
       color: '#525151', 
       font: '12px Helvetica', 
       fontWeight: 'bold' 
      }, 
      formatter: function() { 
       return this.value; 
      } 
     }, 
     title: { 
      text: "TEST" 
     } 
    }, 
    yAxis: { 
     gridLineColor: '#ebebeb', 
     lineColor: '#ebebeb', 
     minorGridLineColor: '#ebebeb', 
     tickColor: '#ebebeb', 
     plotLines: [{ 
      color: '#ebebeb' 
     }], 
     labels: { 
      style: { 
       color: '#525151', 
       font: '12px Helvetica', 
       fontWeight: 'bold' 
      }, 
      formatter: function() { 
       return this.value; 
      } 
     }, 
     title: { 
      text: null 
     } 
    } 
}; 

// Apply the theme 
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);

而我将其应用于图表：

chart1 = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'showChart' 
     }, 
     colors: [{ 
      linearGradient: perShapeGradient, 
      stops: [ 
         [0, 'rgba(32, 106, 166, 0.3)'], 
         [1, 'rgba(32, 106, 166, 0)'] 
         ] 
     }, { 
      linearGradient: perShapeGradient, 
      stops: [ 
         [0, 'rgba(120, 99, 181, 0.3)'], 
         [1, 'rgba(120, 99, 181, 0)'] 
         ] 
     }, 
       ], 
     xAxis: [{ 
      type: 'datetime', 
      labels: { 
       formatter: function() { 
        var monthStr = Highcharts.dateFormat('%l:%M %P', this.value); 
        return monthStr; 
       } 
      } 
     }], 
     series: [{ 
      name: 'Public Views', 
      type: 'area', 
      marker: { 
       symbol: 'url(/Assets/images/marker_blue.png)' 
      }, 
      pointInterval: 3600000, // one hour 
      pointStart: Date.UTC(2009, 9, 6, 0, 0, 0), 
      data: [502, 435, 309, 247, 302, 434, 568, 702, 935, 809, 647, 502, 834, 526, 302, 335, 409, 647, 702, 634, 668, 902, 935, 1009] 
     }, { 
      name: 'Company Views', 
      type: 'area', 
      marker: { 
       symbol: 'url(/Assets/images/marker_purple.png)' 
      }, 
      pointInterval: 3600000, // one hour 
      pointStart: Date.UTC(2009, 9, 6, 0, 0, 0), 
      data: [406, 307, 211, 133, 221, 367, 366, 506, 707, 611, 333, 221, 567, 466, 106, 107, 281, 433, 221, 567, 466, 606, 607, 811] 
     }] 
    });

来源

2012-07-12 Adam Storr

什么是错误？ – 2012-07-12 21:03:33

没有真正的错误。创建图表时设置的xAxis属性似乎覆盖了xAxis主题选项。 – 2012-07-12 21:21:10

你能jsfiddle吗？ – 2012-07-12 21:36:05

yAxis: [{ 
     gridLineColor: '#ebebeb', 
     lineColor: '#ebebeb', 
     minorGridLineColor: '#ebebeb', 
     tickColor: '#ebebeb', 
     plotLines: [{ 
      color: '#ebebeb' 
     }], 
     labels: { 
      style: { 
       color: '#525151', 
       font: '12px Helvetica', 
       fontWeight: 'bold' 
      }, 
      formatter: function() { 
       return this.value; 
      } 
     }, 
     title: { 
      text: null 
     } 
    }]

注意额外的[]周围的括号为y轴。 x不需要。因为yAxis可能有第二个y轴。

来源

2012-07-13 14:55:57 ras

谢谢拉斯......括号是变相杀手。 – 2012-07-13 18:04:19

这也救了我。在我的主题文件中添加数组括号为我解决了这个问题。 – lislis 2016-10-07 20:29:58

Highcharts - 无法将样式应用于x轴标签

回答

相关问题