Question

我正在尝试使用图例绘制mutibar柱形图。这是我的代码。代码似乎正在运行，但它没有以适当的格式添加图例。我正在添加我的数据表的截图和来自我的代码的输出。传说应该显示不同类型的优先级，但它到处显示“图例文本”。

//Plotting Matrix Chart
        chartMatrix.Visible = true;
        LoadChartData(dtHourvsPriorityMatrix);
        chartMatrix.Series["Priority"].ChartType = SeriesChartType.Column;
        chartMatrix.Series["Priority"]["DrawingStyle"] = "Emboss";
        //chartMatrix.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;
        chartMatrix.Series["Priority"].IsValueShownAsLabel = true;

        // Create a new legend called "Legend".
        chartMatrix.Legends.Add(new Legend("Legend"));

        // Set Docking of the Legend chart to the Default Chart Area.
        chartMatrix.Legends["Legend"].DockedToChartArea = "ChartAreaF";

        // Assign the legend to Series=Priority.
        chartMatrix.Series["Priority"].Legend = "Legend";
        chartMatrix.Series["Priority"].IsVisibleInLegend = true;

        LegendCellColumn lcc = new LegendCellColumn("Priority", LegendCellColumnType.Text, "LEGENDTEXT");
        lcc.HeaderFont = new System.Drawing.Font("Trebuchet MS", 12F, System.Drawing.FontStyle.Bold);
        chartMatrix.Legends["Legend"].CellColumns.Add(lcc);


private void LoadChartData(DataTable initialDataSource)
    {
        for (int i = 1; i < initialDataSource.Columns.Count; i++)
        {
            Series series = new Series();
            foreach (DataRow dr in initialDataSource.Rows)
            {
                int y = (int)dr[i];
                series.Points.AddXY(dr["Hour"].ToString(), y);
            }
            chartMatrix.Series.Add(series);
        }
    }

Answer 1

尝试使用canvasjs图表。

使用网络服务绑定数据

<script type="text/javascript">
        $(document).ready(function () {
            var district = $('#ContentPlaceHolder1_hiddistrict').val();
            var assembly = $('#ContentPlaceHolder1_hidassembly').val();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                url: "../WebMyVoterService.asmx/GenderWise",
                data: '{"districtid":"' + district + '","assembly" :"' + assembly + '" }',
                processData: false,
                success: OnSuccess,
                failure: function (response) {
                    alert(response);
                },
                error: function (response) {
                    alert(response);
                }
            });



            function OnSuccess(response) {
                var dpmale = [];
                var dpfemale = [];
                for (var i = 0; i < response.d.length; i++) {
                    var obj = response.d[i];
                    var datamale =
                    {
                        y: parseInt(obj.male),
                        label: obj.boothno,

                    };
                    var datafemale =
                     {
                         y: parseInt(obj.female),
                         label: obj.boothno,

                     };
                    dpmale.push(datamale);
                    dpfemale.push(datafemale);
                }


                var chart = new CanvasJS.Chart("chartContainerbar", {

                    animationEnabled: true,
                    axisX: {
                        interval: 1,
                        labelFontSize: 10,
                        lineThickness: 0,

                    },
                    axisY2: {
                        valueFormatString: "0",
                        lineThickness: 0,
                        labelFontSize: 10,
                    },
                    toolTip: {
                        shared: true
                    },
                    legend: {
                        verticalAlign: "top",
                        horizontalAlign: "center",
                        fontSize: 10,
                    },

                    data: [{

                        type: "stackedBar",
                        showInLegend: true,
                        name: "Male",
                        axisYType: "secondary",
                        color: "#f8d347",
                        dataPoints: dpmale

                    },
                    {

                        type: "stackedBar",
                        showInLegend: true,
                        name: "Female",
                        axisYType: "secondary",
                        color: "#6ccac9",

                        dataPoints: dpfemale

                    }
                    ]
                });
                chart.render();
            }

        });
    </script>

网址：http://canvasjs.com/

Muti-bar柱形图，带有来自Datatable的图例

1 个答案: