Highcharts - 将柱形图与散点图结合起来-Java 学习之路

我有一个柱形图，代表X轴上的两个类别 - ARRIVALS和DEPARTURES . 然后，我有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
                                           }
                                       }
                                    }
})

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'
    }]
});

回复于 2024-05-02T10:24:09+08:00

Highcharts - 将柱形图与散点图结合起来

1 回答

相关问题