Highcharts標簽格式化程序問題

Question

我正在使用格式化程序在highchart柱形圖中的x軸標簽中為每個空格添加一個換行符。 但是，當您一直向右滾動時，會出現故障/問題。

問題：一直滾動到右邊會導致閃爍，一旦我一直到頁面的右邊，就會出現“ this.value.replace is not function”錯誤。 但是只有當我完全正確時。

演示： 這是

目標：平滑滾動，同時讓標簽中的每個空格都中斷。

碼：

  $(function () {

      $('#container10').highcharts({
          // colors: [Complete],
          chart: {
              type: 'column'
          },
          title: {
              text: ''
          },
          xAxis: {
              categories: [
                  'SKIN CARE FACIAL',
                  'SKIN HAND AND BODY LOTION',
                  'HAIR SHAMPOO / CONDITIONER / FIXATIVES',
                  'COUGH COLD SUNCARE (RACK 1)',
                  ' SKIN CARE FACIAL (COS Stores)',
                  ' RK 1 COUGH COLD SUNCARE (RACK 1)',
                  ' SKIN BAR SOAP / LIQUID SOAP',
                  ' COUGH COLD ALLERGY (RACK 2)',
                  'SUNCARE IN-LINE',
                  'RK 2 COUGH COLD ALLERGY (RACK 2)',
                  'ORAL CARE (COS Stores)',
                  'WOMENS BODY WASH (COS Stores)',
                  'DIGESTIVE (COS Stores)',
                  'HAIR SHAMPOO / CONDITIONER / FIXATIVES_MACRO',
                  'MENS SHAVE (COS Stores)',
                  'COSMETICS',

              ],
              min: 0,
              max: 5,
              labels: {
                  step: 1,
                  formatter: function () {
                      return this.value.replace(/ /g, '<br />');
                  },
                  style: {
                      fontSize: 9
                  }
              }
          },
          yAxis: {

              title: {
                  text: ''
              }
          },
          legend: {
              enabled: false
          },
          tooltip: {
              formatter: function () {
                  var s = '<b>' + this.x + '</b>';

                  $.each(this.points.reverse(), function () {
                      s += '<br/>' + this.series.name + ': $' + this.y.toFixed(0);
                  });

                  return s;
              },
              shared: true
          },
          plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: true,
                      //  color: TextColor,
                      style: {
                          // textShadow: '0 0 3px black',
                          fontSize: 10
                      }
                  }
              }
          },

          scrollbar: {
              enabled: true,
              barBackgroundColor: 'gray',
              barBorderRadius: 7,
              barBorderWidth: 0,
              buttonBackgroundColor: 'gray',
              buttonBorderWidth: 0,
              buttonBorderRadius: 7,
              trackBackgroundColor: 'none',
              trackBorderWidth: 1,
              trackBorderRadius: 8,
              trackBorderColor: '#CCC',
              rifleColor: 'black',
              buttonArrowColor: 'black',
          },

          series: [{

              name: 'Spent',
              data: [
              39362.06,
              33778.00,
              9246.24,
              4266.45,
              3469.14,
              2982.95,
              2898.72,
              1778.25,
              1659.64,
              1479.00,
              902.15,
              702.37,
              281.54,
              111.32,
              93.89,
              45.53,

              ],
              legendIndex: 0

          }]
      });
  });

Answer 1

擺脫格式化程序，使用html標簽並將whiteSpace設置為normal：

labels: {
    step: 1,
    useHTML:true,
    style: {
        fontSize: '9px',
        whiteSpace: 'normal'
    }
}

http://jsfiddle.net/0a499j2L/3/