Question

由于缩放功能，我想使用HighCharts！一切都很好。有一件事我想要不同，但我似乎无法让它工作......我的代码：

$(function() {
        // Create the chart
        window.chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            rangeSelector: {
                enabled: false
            },
            navigator: {
                series: {
                    type: 'column'
                }
            },
            title: {
                text: 'Overview of veggies'
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: [{
                name: 'Sarah',
                data: [2,2,3,0,8]
            }, {
                name: 'Ben',
                data: [6,0,0,13,2]
            }, {
                name: 'Kiki',
                data: [3,5,1,16,3]
            }, {
                name: 'Anna',
                data: [0,5,1,3,2]
            }],
            credits: {
                enabled: false
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            }
    });
});

在x轴上我想显示类别！这可能是因为它现在显示日期吗？

Answer 1

不是很优雅，但我认为这就是你想要的：

http://jsfiddle.net/ma50685a/23/

$(function() {
    // Create the chart
    var categoriesCptChart = 0;
    var categoriesCptStock = 0;
    var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        rangeSelector: {
            enabled: false
        },
        navigator: {
            series: {
                type: 'column'
            },
            xAxis: {
                labels: {
                        formatter: function() { return categories[categoriesCptStock++ % categories.length]}
                }
            }
        },
        title: {
            text: 'Overview of veggies'
        },
        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },
        series: [{
            name: 'Sarah',
            data: [2,2,3,0,8]
        }, {
            name: 'Ben',
            data: [6,0,0,13,2]
        }, {
            name: 'Kiki',
            data: [3,5,1,16,3]
        }, {
            name: 'Anna',
            data: [0,5,1,3,2]
        }],
        credits: {
            enabled: false
        },
        xAxis: {
            labels: {
                formatter: function() { return categories[categoriesCptChart++ % categories.length]}
            }
        }
    });
});

Answer 2

如前所述，货架图与日期时间轴一起使用，但您可以使用启用了导航器的普通图表。

window.chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column'
    },
    rangeSelector: {
        enabled: false
    },
    navigator: {
            enabled: true,
        series: {
            type: 'column'
        }
    },

示例：

导航轴仍然是日期时间。但我认为嘲笑日期时间轴看起来可以实现类别。

您可以选择实施主 - 详细信息图表。 http://jsfiddle.net/ma50685a/26/

HighStocks需要显示类别而不是日期

2 个答案: