0

我有一个柱形图，代表 X 轴上的两个类别 - 到达和出发。然后，我有 4 个系列代表不同的商品，每个类别一个商品。这最终将在图表上绘制 8 列。

我正在尝试做的是添加一个散点图，表示每个条形图一个点（总共 8 个点），但不幸的是，我只能每个类别添加一个点。这可以实施吗？

这是我用于此的代码（它是 MVC .NET）：

Highcharts barChartArrivalsDepartures = new Highcharts("ArrivalsDepartures")
                .InitChart(new Chart
                {                    
                    BorderColor = Color.Black,
                    BorderRadius = 0,
                    BorderWidth = 2
                })
                .SetTitle(new Title { Text = "Arrivals and Departures" })
                .SetXAxis(new XAxis { Categories = new[] { "Arrivals", "Departures"} })
                .SetYAxis(new YAxis
                {
                    Min = 0,
                    Title = new YAxisTitle { Text = "Count [t]" }
                })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Vertical,
                    Align = HorizontalAligns.Left,
                    VerticalAlign = VerticalAligns.Top,
                    X = 290,
                    Y = 0,
                    Floating = true,
                    BackgroundColor = new BackColorOrGradient(new Gradient
                    {
                        LinearGradient = new[] { 0, 0, 0, 400 },
                        Stops = new object[,]
                            {
                                { 0, Color.FromArgb(13, 255, 255, 255) },
                                { 1, Color.FromArgb(13, 255, 255, 255) }
                            }
                    }),
                    Shadow = true
                })
                .SetTooltip(new Tooltip { Formatter = @"function() { return ''+ this.x +': '+ this.y +' tones'; }" }) 
.SetSeries(new[]
                           {
                               new Series { Type = ChartTypes.Column, Name = "Coal", Data = new Data(new object[] { 49.9, 71.5 }), PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
                               new Series { Type = ChartTypes.Column, Name = "Magnetite", Data = new Data(new object[] { 48.9, 38.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
                               new Series { Type = ChartTypes.Column, Name = "Iron Ore", Data = new Data(new object[] { 83.6, 78.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
                               new Series { Type = ChartTypes.Column, Name = "Grain", Data = new Data(new object[] { 42.4, 33.2 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
                               new Series
                                   {
                                       Type = ChartTypes.Scatter,
                                       Name = "Target Coal",
                                       Color = ColorTranslator.FromHtml("#FF0000"),
                                       //Data = new Data(new object[] { new object[] {40}, new object[] {80}}),
                                       Data = new Data(new object[] { 15, 50} ),
                                       PlotOptionsScatter = new PlotOptionsScatter
                                       {
                                           Marker = new PlotOptionsScatterMarker
                                           {
                                               Symbol = "diamond",
                                               Radius = 3
                                           }
                                       }
                                    }
})
4

1 回答 1

1

这不是 .net 中的解决方案，但一般的想法是计算每个散点的 x 值，例如：http: //jsfiddle.net/3bQne/206/

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'column',
    },
    xAxis: {
        categories: ['+', '-']

    },

    series: [{
        data: [1,2],
        id: 'first',
        stack: 0
    }, {
        data: [3,5],
        id: 'second',
        stack: 0
    }, {
        data: [[-0.15,1],[0.85,2]],
        linkedTo: 'first',
        type: 'scatter'
    }, {
        data: [[0.15,3],[1.15,5]],
        linkedTo: 'second',
        type: 'scatter'
    }]
});
于 2013-06-10T13:10:36.013 回答