javascript Highcharts 带线的堆积柱形图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22471416/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts stacked column bar with line
提问by saif
I want this stacked column chart Demo column stackedwith this Basic Column with line. What i want is have a line in this stacked column chart.
我想要这个堆积柱形图 演示列与这个带有 line 的 Basic Column堆积在一起。我想要的是在这个堆积柱形图中有一条线。
Note: I've found this example already present in stackoverflow, Stacked bar with line, but can't really make it a stacked column with line.
注意：我发现这个例子已经出现在 stackoverflow, Stacked bar with line 中，但不能真正使它成为一个带有 line 的堆叠列。
I'm using HighCharts .Net plugin, my code for stacked bar is:
我正在使用 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();
Can anyone help on this?
任何人都可以帮忙吗？
回答by tbem
Here is a solution with plain JS.
这是一个简单的 JS 解决方案。
HTML:
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:
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: '%'
}
}]
});
});
I made a JS fiddle with this example. You can check it here
我用这个例子做了一个 JS 小提琴。你可以在这里查看
回答by saif
I can't believe it was so simple, i was just experimenting with code, and it just get solved. All i have to do is add a new series and specify type in every one of them.
我不敢相信它这么简单，我只是在试验代码，然后就解决了。我所要做的就是添加一个新系列并在每个系列中指定类型。
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 }
});
