高位图表格式化程序无法在高位图表API上工作
High chart formatter not working on Highchart API
我正在使用Highchart库,但在使用后非常失望。Highchart回调函数格式化程序不适用于任何图表。我正在使用Highchart API,它返回图表的图像。但是具有错误的x轴值。我希望值为"hello1、hello2、hello3等",但它只给我数字1、2、3。。。请帮帮我。
Js Fiddle的链接:https://jsfiddle.net/stjk38rz/
代码为
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness'],
count = 0;
var options = {
exporting: {
url: 'https://export.highcharts.com/'
},
chart: {
polar: true,
renderTo: 'container',
zoomType: 'x'
},
pane: {
startAngle: 45,
},
title: {
text: 'Highcharts Polar Chart'
},
xAxis: {
tickInterval: 1,
min: 0,
max: 6,
labels: {
enabled: true,
formatter: function () {
if(this.value.toString().substring(0, 6) == 0)
{
return "hello1";
}
if(this.value.toString().substring(0, 6) == 1)
{
return "hello2";
}
if(this.value.toString().substring(0, 6) == 2)
{
return "hello3";
}
if(this.value.toString().substring(0, 6) == 3)
{
return "hello4";
}
if(this.value.toString().substring(0, 6) == 4)
{
return "hello5";
}
if(this.value.toString().substring(0, 6) == 5)
{
return "hello6";
}
}
}
},
tooltip: {
formatter: function () {
return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
}
},
yAxis: {
labels: {
enabled: false
},
min: 0,
tickInterval: 10,
tickPositions: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
minorTickInterval: 0
},
plotOptions: {
series: {
pointStart: 0.5,
pointInterval: 1
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'test data',
data: [{
y: 9.5,
color: '#0FCCD9'
}, {
y: 1,
color: '#ED1334'
}, {
y: 3,
color: '#EDCC13'
}, {
y: 4,
color: '#34ED13'
}, {
y: 5,
color: '#34ED13'
}, {
y: 6,
color: '#34ED13'
}]
}]
};
var obj = {},
exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;
$.ajax({
type: 'post',
url: exportUrl,
data: obj,
success: function (data) {
var imgContainer = $("#imgContainer");
$('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
$('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
}
});
似乎根本没有调用formatter
。
这可能是因为它是一个极坐标图,或者您的代码中可能存在其他冲突来覆盖它?
只要你只想要文本,你就可以将文本作为categories
传入,即:
var categories = ['Conflict', 'Identity', 'Role', 'Attitude', 'Agility', 'Fairness']
xAxis: {
categories: categories
}
更新的fiddle
相关文章:
- 如何使用tweenJS使位图移动到某些点
- 使用EaselJS位图时捕获错误的URL
- easeljs在不同的位置多次添加位图到舞台上
- 用纯Javascript(无html)创建画布/位图
- JavaScript画布可以像位图一样操作吗?它是否为此进行了优化
- 任何比较两个不同位图图像并在javascript中检测不同区域的方法
- 圆形路径中的位图旋转 CreateJS Tweenjs.
- EaseJS将颜色过滤器应用于位图
- 画布/JS存储矢量/位图对象
- 我正在尝试从可绘制对象中获取位图
- 位图仅在刷新后呈现或根本不呈现
- 将位图从Flash电影传输到Javascript
- 使用 javascript 获取位图的像素
- 用于在 Photoshop 中的位图图像中创建文本的 Photoshop 脚本
- 物理JS和位图
- 将字体文本转换为呈现的图形位图
- 如何检索 BSTR* picBytes 并在任何 HTML 脚本中显示位图图片
- 将位图数组发送到 SmartFoxserver
- 在 JavaScript 中将原始图像的十六进制字符串转换为位图图像
- 寻找一个交互式javascript地图解决方案,允许放大,标记和使用位图图像(不是SVG))