HighCharts-在气泡图中以x轴表示x值的类别

Die*_*nue 2 javascript jquery highcharts

我的气泡图非常简单,我希望它在xaxis上显示自定义字符串而不是x值。对于在x轴上的系列中的拳头对象,显示proyect 1,依此类推。

$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: 'Highcharts for staff project time'
    },

    xAxis: {
        categories:['Project 1', 'Project 2', 'Project 3']
    },



    series: [{
        data: [
                   { x: 3.5, y: 4, z: 5, color: 'blue' },
                   {  x: 7, y: 7, z: 3, color: 'blue' },
                   {  x: 4, y: 8, z: 6, color: 'blue' }
                ],
    }]

  });
});
Run Code Online (Sandbox Code Playgroud)

我们要显示项目1,proyect 2 ....,而不是相应的x值。也许在x轴上像它在其中显示xAxis:{category:['Project 1','Project 2','Project 3']},

或在对象中

数据:[{名称:Proyect 1,x:3.5,y:4,z:5,颜色:'blue'},{名称:Proyect 2,x:7,y:7,z:3,颜色:'blue '},{名称:Proyect 3,x:4,y:8,z:6,颜色:'blue'}],

然后在x轴名称中显示,而不是x值。

这是我用于测试的jsfiddle,用于替换数据。

http://jsfiddle.net/jlbriggs/36zn2/1/

Die*_*nue 5

我们使这个气泡图非常简单,我们希望它在xaxis上显示自定义字符串而不是x值

$(function () {
var names = ["DAVE","JOHN"];
var projects = ["Project 1","Project 2"];
$('#container').highcharts({

    chart: {
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: 'Highcharts for staff project time'
    },

    xAxis: {
        categories:['Project 1', 'Project 2', 'Project 3']
    },



    series: [{
        data: [
                   { x: 3.5, y: 4, z: 5, color: 'blue' },
                   {  x: 7, y: 7, z: 3, color: 'blue' },
                   {  x: 4, y: 8, z: 6, color: 'blue' }
                ],
    }]

   });
});
Run Code Online (Sandbox Code Playgroud)

我们要显示项目1,proyect 2 ....,而不是相应的x值。也许像它在x轴上显示的那样

 xAxis: {
        categories:['Project 1', 'Project 2', 'Project 3']
      },
Run Code Online (Sandbox Code Playgroud)

或在对象中

data: [
                   { name: Proyect 1, x: 3.5, y: 4, z: 5, color: 'blue' },
                   { name: Proyect 2, x: 7, y: 7, z: 3, color: 'blue' },
                   { name: Proyect 3, x: 4, y: 8, z: 6, color: 'blue' }
                ],
Run Code Online (Sandbox Code Playgroud)

然后在x轴名称中显示,而不是x值。

我从Highcharts服务台获得了答案,我想分享一下:

在第一种情况下,不会打印类别的标签,因为类别是从0开始索引的,因此您有标签“直到2”的索引。但是在数据中,您引用的是3,5 / 4/7索引,因此仅打印数字。(具有这些索引的标签不在类别中)。

您可以使用以下解决方案:-在数据中修复索引,例如:http//jsfiddle.net/ee5ffq9w/1/- 增加类别数量-使用类别名称为:http : //jsfiddle.net/ee5ffq9w的点/ 2 /