如何制作水平图例

Question

请告诉我们如何制作水平图例。

结果如下：

​

​

但我想要的是：

​

我有以下代码：

​

<script type="text/javascript">

        //$(function () {
        function getJson() {
            var result = [];
            $.ajax({
                url: "WebService1.asmx/GetJson3",
                success: function (data) {
                    $.each(data, function (key, value) {
                        item = {
                            "company": value.BusinessUnitName,
                            "revenue": value.QTY_Case,
                            "expenses": value.QTY_Case_Target,
                            "cos": value.QTY_Case_LY
                        }
                        result.push(item);
                    });
                },
                async: false,
            });

            $("#columnChart").igDataChart({
                width: "280px",
                height: "200px",
                dataSource: result,
                legend: {
                    element: "columnLegend"
                },

                title: "title",
                subtitle: "subtitle",

                axes: [{
                    name: "xAxis",
                    type: "categoryX",
                    //label: "company",
                    labelTopMargin: 5,
                    gap: 0.4,  
                    overlap: 0.0,
 
                }, {
                    name: "yAxis",
                    type: "numericY",
                    maximumValue: 250000,
                    interval: 50,
                    minimumValue: 0,
                    formatLabel: function (val) {
                        var bVal = (val / 10000),
                        rounded = Math.round(bVal * 100) / 100;
                        return rounded + "M";
                    }
                }],
                series: [{
                    name: "series1",
                    title: "revenue",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "revenue"
                }, {
                    name: "series2",
                    title: "expenses",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "expenses"
                }, {
                    name: "series3",
                    title: "cos",
                    type: "column",
                    isTransitionInEnabled: true,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    valueMemberPath: "cos"
                },
                ]
            });

        }
        $(function () {
            getJson();
        });

    </script>

​

我希望能得到指导。谢谢你，致以最好的敬意

Answer 1

这个问题在Andrew Bone提供的链接中得到了回答。我也会在这里张贴答案，这样它就是可见的。

使属于图例的表行显示为inline-block。

#columnLegend tr {
    display: inline-block;
}

根据您提供的代码，我的另一个建议是不要使$.ajax调用同步。只需在成功回调中初始化igDataChart即可。

$.ajax({
    url: "WebService1.asmx/GetJson3",
    success: function (data) {
        $.each(data, function (key, value) {
            item = {
                "company": value.BusinessUnitName,
                "revenue": value.QTY_Case,
                "expenses": value.QTY_Case_Target,
                "cos": value.QTY_Case_LY
            }
            result.push(item);
            initChart();
        });
    }
});