Fatal编程技术网
  • highcharts/
  • Highcharts：如何将样式应用于x轴标签？

Highcharts：如何将样式应用于x轴标签？

highcharts

Highcharts：如何将样式应用于x轴标签？,highcharts,Highcharts,/xAxis示例代码上的文本重叠/ /我只能看到颜色，其余的变化都没有反映出来/ 我试过格式化程序函数 我收到的错误是 当我使用xAxis.labels.formatter函数时，初始网页加载显示轴值，例如{0,0.5,1,1.5,2,2.5…}，而不是类别名称 我在xAxis.labels.style中定义了textOverflow:省略号，但文本仍在显示中重叠 我刚开始使用海图 我正在编写的代码： style: { "color":"green",

/xAxis示例代码上的文本重叠/

/我只能看到颜色，其余的变化都没有反映出来/

我试过格式化程序函数

我收到的错误是

  • 当我使用xAxis.labels.formatter函数时，初始网页加载显示轴值，例如{0,0.5,1,1.5,2,2.5…}，而不是类别名称
  • 我在xAxis.labels.style中定义了textOverflow:省略号，但文本仍在显示中重叠
    • 我刚开始使用海图

    我正在编写的代码：

            style: {
            "color":"green",
            "text-overflow": 'ellipsis',
            "line-height": "1.5em",
                        "height": "4.5em",
                        "white-space":"nowrap",
                         "word-wrap": "break-word",
                         "hyphens":"auto"

        }
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: 'Population (millions)',
         align: 'high'
      },
      labels: {
         overflow: 'justify'
      }
   };
   var tooltip = {
      valueSuffix: ' millions'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      },
      series: {
         stacking: 'normal'
      }
   };
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
   };
   var credits = {
      enabled: false
   };

   var series= [{
         name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]      
        }
   ];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.legend = legend;
   json.credits = credits;
   $('#container').highcharts(json);

});

    $（文档）.ready（函数（）{
var图表={
类型：“列”
};
变量标题={
文本：“堆叠柱形图”
};    
变量xAxis={
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
};
雅克西斯变种={
分:0,，
标题：{
正文：“水果总消费量”
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
};
变量图例={
对齐：“右”，
x:-30，
垂直排列：“顶部”，
y:25，
浮动：是的，
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |“白色”，
边框颜色：“#CCC”，
边框宽度：1，
影子：错
};   
变量工具提示={
格式化程序：函数（）{
返回“+this.x+”
    +
this.series.name+'：'+this.y+'
    +
“总计：”+this.point.stackTotal；
}
};
变量plotOptions={
专栏：{
堆叠：“正常”，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”，
风格：{
textShadow:'0 0 3px黑色'
}
}
}
};
风险值信用={
已启用：false
};
变量系列=[{
姓名：'约翰'，
数据：[5,3,4,7,2]
}, {
姓名：'简'，
数据：[2,2,3,2,1]
}, {
名字：'乔'，
数据：[3,4,4,2,5]
}];     
var json={}；
json.chart=chart；
json.title=标题；
json.xAxis=xAxis；
json.yAxis=yAxis；
json.legend=图例；
json.tooltip=工具提示；
json.plotOptions=plotOptions；
json.credits=学分；
json.series=series；
$（“#容器”）.highcharts（json）；
});
    首先，我试图避免重叠

    对于我应用的xAxis标签：

    $(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Stacked column chart'   
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
   };
   var legend = {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
   };   
   var tooltip = {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
      }
   };
   var plotOptions = {
      column: {
         stacking: 'normal',
         dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
               textShadow: '0 0 3px black'
            }
         }
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]      
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);

});

    formatter=function（）{
var lt=该值；
如果（长度>8）{
//console.log（lt.substr（0,4））；
var temp=此值substr（0,6）；
var temp2=这个.value.substr（6,6）；
var temp3=这个.value.substr（12,6）；
返回“+temp+”
    “+temp2+”
    “+temp3+”；
}否则{
返回此.value；
}
}
    但它对我不起作用

    请发布您尝试过的内容。对于初学者来说，这可能是一本不错的读物：当然，jlbriggs我会浏览链接。您的大多数问题都在Highcharts的更高版本中得到解决-以控制您可以使用的xAxis标签样式和。在更复杂的设计中，您可能希望使用HTML-您可以在将useHTML设置为true后执行此操作-嗨，Kacper，我尝试过处理它，但仍然会出现错误。。。。。。我已经用工作代码更新了问题。。。 
            style: {
            "color":"green",
            "text-overflow": 'ellipsis',
            "line-height": "1.5em",
                        "height": "4.5em",
                        "white-space":"nowrap",
                         "word-wrap": "break-word",
                         "hyphens":"auto"

        }
      }
   };
   var yAxis = {
      min: 0,
      title: {
         text: 'Population (millions)',
         align: 'high'
      },
      labels: {
         overflow: 'justify'
      }
   };
   var tooltip = {
      valueSuffix: ' millions'
   };
   var plotOptions = {
      bar: {
         dataLabels: {
            enabled: true
         }
      },
      series: {
         stacking: 'normal'
      }
   };
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'top',
      x: -40,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
      shadow: true
   };
   var credits = {
      enabled: false
   };

   var series= [{
         name: 'Year 1800',
            data: [107, 31, 635, 203, 2]
        }, {
            name: 'Year 1900',
            data: [133, 156, 947, 408, 6]
        }, {
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 34]      
        }
   ];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.subtitle = subtitle; 
   json.tooltip = tooltip;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   json.legend = legend;
   json.credits = credits;
   $('#container').highcharts(json);

});

    $(document).ready(function() {  
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Stacked column chart'   
   };    
   var xAxis = {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
   };
   var yAxis ={
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
           fontWeight: 'bold',
           color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
   };
   var legend = {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
   };   
   var tooltip = {
      formatter: function () {
         return '<b>' + this.x + '</b><br/>' +
            this.series.name + ': ' + this.y + '<br/>' +
            'Total: ' + this.point.stackTotal;
      }
   };
   var plotOptions = {
      column: {
         stacking: 'normal',
         dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
               textShadow: '0 0 3px black'
            }
         }
      }
   };
   var credits = {
      enabled: false
   };
   var series= [{
        name: 'John',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Jane',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5]      
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);

});

    formatter = function() {

  var lt = this.value;
  if (lt.length > 8) {

    // console.log(lt.substr(0,4));
    var temp = this.value.substr(0, 6);
    var temp2 = this.value.substr(6, 6);
    var temp3 = this.value.substr(12, 6);
    return '<div class="xLabels"  title="' + this.value + '">' + temp + '<br>' + temp2 + '<br>' + temp3 + '</div>';
  } else {
    return this.value;


  }
}