Highcharts带线的堆叠柱形条

yk9xbfzb 于 2023-05-13 发布在 Highcharts

关注(0)|答案(2)|浏览(135)

我想要这个堆叠柱形图Demo column stacked和这个Basic Column with line。我想要的是在这个堆叠柱形图中有一条线。
注意：我发现这个例子已经存在于stackoverflow，Stacked bar with line中，但不能真正使它成为一个带有line的堆叠列。
我使用HighCharts.Net插件，我的代码堆叠酒吧是：

Highcharts chart = new Highcharts("chart");

    chart.SetSeries(new[]
                {
                    new Series { Name = "Title1", Data = new Data(data1) },
                    new Series { Name = "Title2", Data = new Data(data2) },
                    new Series { Name = "Title3", Data = new Data(data3) },
                    new Series { Name = "Title4", Data = new Data(data4) }
                });

    chart.InitChart(new Chart {DefaultSeriesType = ChartTypes.Column});
    chart.SetTitle(new Title{Text = "Graph title" });
    chart.SetXAxis(new XAxis { Categories = xaxis });
    chart.SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle { Text = "Total hit" },
                StackLabels = new YAxisStackLabels
                {
                    Enabled = true,
                    Style = "fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'"
                }
            });
    chart.SetLegend(new Legend
            {
                Layout = Layouts.Horizontal,
                Align = HorizontalAligns.Right,
                VerticalAlign = VerticalAligns.Top,
                X = -100,
                Y = 20,
                Floating = true,
                BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF")),
                BorderColor = ColorTranslator.FromHtml("#CCC"),
                BorderWidth = 1,
                Shadow = false
            });
    chart.SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    Stacking = Stackings.Normal,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Color = Color.White
                    }
                }
            });
    ltrChart.Text = chart.ToHtmlString();

有人能帮忙吗？

highcharts

来源：https://stackoverflow.com/questions/22471416/highcharts-stacked-column-bar-with-line

2条答案

按热度按时间

xxhby3vn1#

这是一个简单的JS解决方案。
HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>

JS：

$(function () {
  $('#container').highcharts({
    chart: {
        zoomType: 'xy'
    },
    colors: ['#7cb5ec', '#91e8e1', '#90ed7d'],

    title: {
        text: 'Something '
    },
    subtitle: {
        text: 'subsomething'
    },
    xAxis: [{
        categories: ['1/1','2/1','3/1','4/1', '5/1', '6/1','7/1','8/1','9/1','10/1','11/1', '12/1', '13/1', '14/1', '15/1']
                    }],
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        min: 0,
        max:100,
        title: {
            text: 'Percent',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: '',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        min: 0,
        max: 100,
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[0],
                display:'none'
            }
        },
        opposite: true
    }],
    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'center',
        x: -0,
        verticalAlign: 'top',
        y: 400,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    plotOptions: {
        column: {
            stacking: 'percent'
        }
    },
    series: [
        {
        name: 'suff1',
        type: 'column',

        yAxis: 1,
        data: [20, 25, 10,30,80, 20, 25, 10,30,80, 20, 25, 10,30,80],
        tooltip: {
            valueSuffix: ' %'
        }

    }, 
      {
          name: 'suff2',
        type: 'column',

        yAxis: 1,
       tooltip: {
            valueSuffix: ' %'
        },
        data: [30, 50, 30,30,10, 30, 50, 30,30,10, 30, 50, 30,30,10]
    }, {
        name: 'suff3',
        yAxis: 1,
        type: 'column',
        tooltip: {
            valueSuffix: ' %'
        },
        data: [50,25, 60, 40, 10, 50,25, 60, 40, 10, 50,25, 60, 40, 10]
    },
      {
        name: 'NS',
        type: 'spline',

        data: [45,55,74,85,81, 45,55,74,85,81, 45,55,74,85,81],
        tooltip: {
            valueSuffix: '%'
        }
    }]
 });
 });

我做了一个JS小提琴与这个例子。你可以查here

赞(0）回复(0）举报 2023-05-13

wlwcrazw2#

我不敢相信它是如此简单，我只是用代码试验，它只是得到解决。我所要做的就是添加一个新的系列，并在每个系列中指定类型。

chart.SetSeries(new[]
            {
                new Series { Name = "Title1", Data = new Data(data1), Type = ChartTypes.Column },
                new Series { Name = "Title2", Data = new Data(data2), Type = ChartTypes.Column },
                new Series { Name = "Title3", Data = new Data(data3), Type = ChartTypes.Column },
                new Series { Name = "Title4", Data = new Data(data4), Type = ChartTypes.Column }
                new Series { Name = "Title5", Data = new Data(data5), Type = ChartTypes.Line }
            });

赞(0）回复(0）举报 2023-05-13

我来回答

Highcharts带线的堆叠柱形条

2条答案

相关问题

热门标签

最新问答