javascript - Highcharts 标签格式化程序问题

Question

我正在使用格式化程序为 highchart 柱形图中 x 轴标签中的每个空格添加换行符。但是，当您一直滚动到右侧时，它会出现故障/问题。

问题:一直滚动到右侧会导致闪烁，一旦我在页面上一直滚动到右侧，就会收到“this.value.replace 不是函数”错误。但只有当我一直走到右边时。

演示: Here is it

目标:平滑滚动，同时标签中的每个空格都有中断。

代码:

  $(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 标签并将空格设置为正常:

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

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