怎么做图例是横向的答案

【问题标题】：How to make a legend is horizontally怎么做图例是横向的
【发布时间】：2015-12-15 07:22:46
【问题描述】：

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

结果如下：

但我想要这个：

我有以下代码：

<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>

希望得到指导。谢谢你，最好的尊重

【问题讨论】：

我不确定 HTML 输出是什么样的，但您可以将三个元素（收入、费用、余数）设置为在 CSS 中每个元素都有一个 display 或 inline-block .因为你在这里有 CSS 标签。
google.co.uk/… 第一个结果是别人问了同样的问题，他们得到了答案
感谢 Sam 和 Andrew Bone 这是非常好的建议。我刚刚添加了一些代码，因为它们会指导您。是成功。最好的尊重

标签： javascript jquery css infragistics ignite-ui

【解决方案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();
        });
    }
});

【讨论】：

你好康斯坦丁迪内夫，感谢您的建议。我添加了代码：#columnLegend tr {display: inline-block;}。其中。它的成功和知名度。