javascript - Highcharts 带线的堆积柱形图

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

注意:我发现这个例子已经存在于 stackoverflow, 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 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();

任何人都可以帮忙吗？

最佳答案

这是一个简单的 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

关于javascript - Highcharts 带线的堆积柱形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22471416/