Highcharts:让x轴显示图例

Highcharts: Getting x-axis to display legend

本文关键字：显示图 Highcharts 更新时间：2023-09-26

首先是我的代码

http://jsfiddle.net/woon123/5t2gpyx7/

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'venue_chart',
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Popularity of Venues'
        },
        subtitle: {
            text: 'Redemption Count'
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of Users'
            }
        },
        xAxis: {
            type: 'category'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30
        },
        series: [{
            name: "Chicken Up @ Jurong East",
            data: [{
                name: "Chicken Up @ Jurong East",
                y: 30,
                drilldown: "Chicken Up @ Jurong East"
            }]
        }, {
            name: "Chicken Up @ Tanjong Pagar",
            data: [{
                name: "Chicken Up @ Tanjong Pagar",
                y: 50,
                drilldown: "Chicken Up @ Tanjong Pagar"
            }]
        }, {
            name: "Chicken Up @ Tampines",
            data: [{
                name: "Chicken Up @ Tampines",
                y: 60,
                drilldown: "Chicken Up @ Tampines"
            }]
        }, ],
        drilldown: {
            series: [{
                name: "Redemption Count",
                id: "Chicken Up @ Jurong East",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 5],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 4],
                    [
                        "Soju Cocktails at $17.00", 1],
                    [
                        "12345678", 10],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
            }, {
                name: "Redemption Count",
                id: "Chicken Up @ Tanjong Pagar",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 10],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 10],
                    [
                        "Soju Cocktails at $17.00", 10],
                    [
                        "12345678", 10],
                    [
                        "Early Bird 20% Off Bill", 3],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
            }, {
                name: "Redemption Count",
                id: "Chicken Up @ Tampines",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 10],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 10],
                    [
                        "Soju Cocktails at $17.00", 15],
                    [
                        "12345678", 15],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
            }, ]
        }
    });
});

我的问题是，虽然图例显示正确，当在x轴上使用type:category时，它只显示姓氏是Chicken Up @ Tampines。

我希望x轴显示所有三个场馆，而不仅仅是最后一个场馆，并且图例保持原样。

另一个问题是在我深入之后。

在本例中，我希望图例显示x轴，以便允许我切换它们的打开/关闭。

我尝试设置x轴来显示类别['venue1'， 'venue2'， 'venue3']，但在这种情况下，我的图例只显示系列1。

我想要一些关于如何使图例和x轴相同的建议。

谢谢!

我给你两个谜语，这可能是一个线索!

第一:小提琴

$(function(){
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Staten Island Violation Distribution'
    },
    subtitle: {
        text: 'Source: NYC Open DataSet</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    data: {
        csv: document.getElementById('csv').innerHTML
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
    legend: {
        enabled: true
    },
    tooltip: {
        pointFormat: 'Count: <b>{point.y}</b>'
    },
    plotOptions: {
        column: {
            grouping: false,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '8px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }    
        }        
    },
    series: [ { name: "Description" },
              { name: "Description1" },
              { name: "Description2" },
              { name: "Description3" },
              { name: "Description4" },
              { name: "Description5" } ]
});
});

第二:小提琴

$(function () {
// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: 'fruits'
        }, {
            name: 'Cars',
            y: 4,
            drilldown: 'cars'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            data: [
                ['Cats', 4],
                ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {
            id: 'fruits',
            data: [
                ['Apples', 4],
                ['Oranges', 2]
            ]
        }, {
            id: 'cars',
            data: [
                ['Toyota', 4],
                ['Opel', 2],
                ['Volkswagen', 2]
            ]
        }]
    }
});
});