Question

我正在构建Asp.net MVC网站，我正在尝试在同一页面上显示多个图表，但是当我添加第二个图表时，它覆盖了第一个图表，因此它们永远不会出现在彼此之下，它们似乎而是相互叠加。我尝试添加表格并将每个图表添加到表格行但这也不起作用，不确定我缺少什么。

@(Html.Highsoft().Highcharts(
    new Highcharts
    {
        Chart = new Highsoft.Web.Mvc.Charts.Chart
        {
            Type = ChartType.Line
        },
        Title = new Title
        {
            Text = ""
        },
        XAxis = new List<XAxis>
        {
            new XAxis
            {
                Type = XAxisType.Datetime,
                Categories = ViewData["xValues"] as List<string>,
                //Type = XAxisType.Datetime,
                //TickInterval = 7 * 24 * 3600 * 1000, // one week
                //TickWidth = 0,
                //GridLineWidth = 1,
                Labels = new XAxisLabels
                {
                    Align = XAxisLabelsAlign.Left,
                    X = 3,
                    Y = 40
                },
                Crosshair = new XAxisCrosshair
                {
                    Width = 2
                }
            }
        },
        YAxis = new List<YAxis>
        {
            new YAxis
            {

                Labels = new YAxisLabels
                {
                    Align = YAxisLabelsAlign.Left,
                    X = 3,
                    Y = 16,
                    Format = "{value:.,0f}"
                },
                ShowFirstLabel = false
            },
    },
        Legend = new Legend
        {
            Align = LegendAlign.Left,
            VerticalAlign = LegendVerticalAlign.Top,
            Y = 20,
            Floating = true,
            BorderWidth = 0
        },
        PlotOptions = new PlotOptions
        {
            Series = new PlotOptionsSeries
            {
                Cursor = PlotOptionsSeriesCursor.Pointer,
                Events = new PlotOptionsSeriesEvents
                {
                    Click = "handleClick"
                },
                Marker = new PlotOptionsSeriesMarker
                {
                    LineWidth = 1
                }
            }
        },
        Series = new List<Series>
        {
            new LineSeries
            {
                Name = "Error Page Count",
                Data = @ViewData["Count"] as List<LineSeriesData>
            },
            new LineSeries
            {
                Color = "blue",
                Name = "Error Page Rate",
                Data = @ViewData["Values"] as List<LineSeriesData>

            },
            new LineSeries
            {
                Color = "black",
                Name = "Error Page Rate (Users)",
                Data = @ViewData["Rate"] as List<LineSeriesData>
            }

        }
    }
    , "chart"))

<script type="text/javascript">
function formatToolTip() {
        return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }

@(Html.Highsoft().Highcharts(
    new Highcharts
    {
        Title = new Title
        {
            Text = "Stacked bar chart"
        },
        XAxis = new List<XAxis>
        {
            new XAxis
            {
                Categories = new List<string> { "Apples", "Oranges", "Pears", "Grapes", "Bananas" }
            }
        },
        YAxis = new List<YAxis>
        {
            new YAxis
            {
                Min = 0,
                Title = new YAxisTitle
                {
                    Text = "Total fruit consumption"
                },
                StackLabels = new YAxisStackLabels
                {
                    Enabled = true,
                    Style = new Hashtable
                    {
                        { "fontWeght", "bold" }
                    }
                }
            }
        },
        //Legend = new Legend
        //{
        //    Align = LegendAlign.Right,
        //    X = -30,
        //    VerticalAlign = LegendVerticalAlign.Top,
        //    Y = 25,
        //    Floating = true,
        //    BorderColor = "#CCC",
        //    BorderWidth = 1,
        //    BackgroundColor = "white"

        //},
        Tooltip = new Tooltip
        {
            Formatter = "formatToolTip"
        },
        PlotOptions = new PlotOptions
        {
            Column = new PlotOptionsColumn
            {
                Stacking = PlotOptionsColumnStacking.Normal,
                DataLabels = new PlotOptionsColumnDataLabels
                {
                    Enabled = true,
                    Color = "#FFFFFF",

                    Shadow = new Shadow()
                    {
                        Enabled = true,
                        Color = "black",
                        Width = 10,
                        OffsetX = 0,
                        OffsetY = 0
                    }
                }
            }
        },
        Series = new List<Series>
        {
            new ColumnSeries
            {
                Name = "John",
                Data = @ViewData["johnData"] as List<ColumnSeriesData>
            },
            new ColumnSeries
            {
                Name = "Jane",
                Data = @ViewData["janeData"] as List<ColumnSeriesData>
            },
            new ColumnSeries
            {
                Name = "Joe",
                Data = @ViewData["joeData"] as List<ColumnSeriesData>
            }
        }
    }
    , "chart")

）

Answer 1

我发现了问题。我在两个图表中使用了相同的图表ID，当我重命名其中一个图表时都没有问题。

如何在同一页面中显示多个HighCharts图表？

1 个答案: