Highchart Zoom和X-Axis with String Array for Categories

时间:2012-12-26 17:17:29

标签: javascript highcharts

我正在调整高图图表。以前,我们使用相关日期在图表上绘制点。该图表还有maxZoom:14 * 24 * 3600000,允许用户进一步向下钻取。

现在我将日期转换为年份+ Q#。所以现在而不是2011年9月,它将在X轴上显示2011年第3季度。

但现在我有两个问题。

1)第一个是它不允许我缩放,因为我将一个字符串数组作为categories传递到图表中。我希望它仍然可以缩放,即使X轴是字符串。据我所知,缩放虽然使用秒来在X轴上的日期之间进行插值。

2)第二个是,当我突出显示它们时,图表上的数据点为Invalid date,即使我已将图形指定为linear。有没有办法可以添加一个显式值来显示这里的突出显示(即转换为年度季度之前的实际日期值?)

有没有办法解决这些问题?

相关代码:

plotData=[];
var month = window.countryData.scorecards[i].month - 1;
var year = window.countryData.scorecards[i].year;
categoriesQuarters.push(year + " Q" + parseInt(month/3 + 1));
plotData.push(value);  //Value is either a number or a string, depending on the graph.
....
xAxis: {
        type: 'linear',
        categories: categoriesQuarters
        },
series: [{
                name: graphData.country,
                data: plotData
            }]

1 个答案:

答案 0 :(得分:1)

使用标签格式化器来执行此操作。

xAxis: {
    labels: {
        formatter: function() {
            var date = Highcharts.dateFormat('%Y-%m', this.value);
            date = date.split('-');
            return date[0] + " Q" + parseInt(date[1]) / 3 + 1;
        }
    }
}

demo