javascript - 使用字符串数组而不是整数数组创建 xAxys - Highcharts

Question

我需要使用字符串数组而不是整数数组来在 Highcharts 上创建我的 xAxys。

有人已经尝试过这样做或者可以帮助我实现这一点吗？

我要在此图表上使用的模拟数据将类似于:

    var weekNoArray = [32, 32, 32, 32, 32, 32, 33, 33, 33, 33, 33, 33, 34, 34, 34, 34, 34, 34],
        retailerNamesArray = ['a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f', 'a', 'b', 'c', 'd', 'e', 'f'],
        clicksArray = [43, 48, 62, 63, 43, 39, 27, 30, 43, 49, 34, 24, 47, 45, 59, 64, 48, 47],
        series = [];

需要使用 retailerNamesArray 变量来创建我的 xAxys。

我已经尝试过生成该系列的内容:

series = generateData(weekNoArray, retailerNamesArray, clicksArray);

function generateData(weekNoArray, retailerNamesArray, clicksArray) {
    var ret = {},
        ps = [],
        series = [],
        len = weekNoArray.length;

    //concat to get points
    for (var i = 0; i < len; i++) {
        ps[i] = {
            x: weekNoArray[i],
            y: clicksArray[i],
            n: retailerNamesArray[i]
        };
    }
    retailerNamesArray = [];
    //generate series and split points
    for (i = 0; i < len; i++) {
        var p = ps[i],
            sIndex = $.inArray(p.n, retailerNamesArray);

        if (sIndex < 0) {
            sIndex = retailerNamesArray.push(p.n) - 1;
            series.push({
                name: p.n,
                data: []
            });
        }
        series[sIndex].data.push(p);
    }
    return series;
}



$('#container').highcharts({
    title: {
        text: 'Retaielr Clicks',
        x: -20 //center
    },
    subtitle: {
        text: 'Date',
        x: -20
    },
    yAxis: {
        title: {
            text: 'Clicks'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: series
});

运行示例:Fiddle 1

Answer 1

在此代码中，weekNoArray 用于设置 x 轴值和 线性 类型的 xAxis。现在，如果您想使用 category 类型轴，您至少应该:

• 将 weekNoArray 值更改为从 0 开始
• 设置 x 轴类别

示例:http://jsfiddle.net/rt4pthvn/