Highcharts 带线条的堆叠柱形条

Posted 2023-03-14

【中文标题】Highcharts 带线条的堆叠柱形条

【英文标题】：Highcharts stacked column bar with line

【发布时间】：2014-03-18 05:54:26

【问题描述】：

我想要这个堆积柱形图 Demo column stacked 与此 Basic Column with line。我想要的是在这个堆积柱形图中有一条线。

注意：我发现这个示例已经存在于 *** 中，Stacked bar with 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 TitleText = "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();

有人可以帮忙吗？

【参考方案1】：

这是一个纯 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 fiddle。你可以查看here

【参考方案2】：

我不敢相信它这么简单，我只是在试验代码，然后它就被解决了。我所要做的就是添加一个新系列并在每个系列中指定类型。

   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 
            );