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

【问题标题】：Create the xAxys with a array of strings instead of an array of integers - Highcharts使用字符串数组而不是整数数组创建 xAxys - Highcharts
【发布时间】：2015-08-09 04:10:52
【问题描述】：

我需要使用字符串数组而不是整数数组来在 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

【问题讨论】：

标签： javascript arrays highcharts

【解决方案1】：

在此代码 weekNoArray 的情况下，用于设置 x 轴值和 linear 类型的 xAxis。现在，如果你想使用 category 类型的轴，你至少应该：

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

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

【讨论】：

但我想使用字符串值设置 x 的值。以您所做的方式，x 轴的验证继续使用整数值，您知道如何使用字符串值吗？谢谢！
@ValdeciGomes 没有办法将 x 设置为字符串 - 轴必须有数字。如果您使用分类轴，则标签的数字会自动添加，但仍会使用数字。其他方法是设置没有 x 值的数据 - 他们将自动分配 x 值。 X 值仍然是数字。示例：jsfiddle.net/rt4pthvn/1
谢谢卡珀！但是在你的例子中，retailerNameArray 的值总是出现在 teste1 的第一列，你知道我怎样才能使这个变量的正确位置吗？看这个例子：jsfiddle.net/rt4pthvn/2，值“GRUPO 4”是retailerNameArray的最后一个值，本来应该出现在最后一列，结果出现在第一列，你知道怎么解决吗？
您不喜欢的一种方法是设置 x。另一种方法是添加 5 个空点，因此第 6 个（您的 GRUPO 4）将放置在最后一列。您应该定义如何放置点或添加更多数据的规则。适用于此数据的示例：jsfiddle.net/rt4pthvn/3
我解决了这个问题，创建了一个函数来将我的字符串值转换为整数值，并使用这个值创建 xAxis，如下例所示：jsfiddle.net/rt4pthvn/8 感谢您的帮助 Kacper！

【解决方案2】：

正如@Kacper Madej 所说，没有办法将 x 设置为字符串 - 轴必须有数字。

所以，我通过创建一个函数来解决这个问题，该函数将数组 retailerNamesArray 的字符串值转换为整数值，然后使用这些值，我可以创建我的 xAxis!。 p>

运行示例：Fiddle 2

【讨论】：