Question

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

问题：向右滚动会导致闪烁，一旦我在页面上一直向右移动，我会得到＆＃34; this.value.replace不是一个功能＆＃34;错误。但只有当我一路走到右边时。

目标：在标签中的每个空格都有间隔时平滑滚动。

代码：

  $(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设置为正常：

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

http://www.uspto.gov/about/offices/cio/section508/04telecom.jsp

Highcharts标签格式化器问题

1 个答案: