在Highcharts中将Series name用作xAxis

时间:2016-08-26 05:15:42

标签: javascript highcharts

我想将我的系列名称用作xAxis。我试过它像下面的代码。此代码创建多个系列但只有一个x轴值。让我们在我的代码中说,我想为xAxis中的每个基金和情节基金价值创建系列。

    function draw(fund, zreturn) {

    zreturn = [12.75, 11.77, 13.76];
    fund = ['abc', 'xyz', 'pqr'];

    var options = {};
    options = {

        chart: {
            renderTo: 'graphDiv',
            type: 'line',
            Height: '400px'

        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Fund Performance Graph',
            x: -20
        },

        subtitle: {
            text: '',
            x: -20
        },

        xAxis: {
            categories: fund
            }
        },

        yAxis: {
            labels: {
                enabled: true,
                format: function () {
                    return (this.value + '%')
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0,

        },

        series: zreturn.filter(function (zreturn, i) {


            return fund[i]

        }).map(function (zreturn, i) {
            /* Then return as series */
            return {
                //type: 'line',
                name: fund[i],
                data: zreturn,
                dataLabels: {
                    align: 'center',
                    enabled: true,
                    format: "{y:.2f}" + '%',
                    style: {
                        fontSize: "8px",
                        fontFamily: 'Arial',

                    },

                }
            }
        })
    }

    var chart = new Highcharts.Chart(options);

};

1 个答案:

答案 0 :(得分:1)

我认为现在您的代码中存在小错误。

首先,您使用yAxis.labels.format作为函数。如果要将其用作函数,它应该是格式化程序:

yAxis: {
  labels: {
    enabled: true,
    formatter: function() {
      return (this.value + '%')
    }
  }
},

接下来,您的数据有误,它应该是一个数组:

data: [
  [i, zreturn]
],

我在这里添加你的点的x值和y值。如果我不添加x值,则积分将始终从0开始,因为您只为每个系列添加了一个点,所有这些都将在第一个类别上。

在这里,您可以找到一个示例,说明您的图表如何与这些小修正一起使用: http://jsfiddle.net/worg6jLz/29/