高图用线堆叠柱状条
Highcharts stacked column bar with line
本文关键字:高图用 更新时间:2023-09-26
我想要这个堆叠柱状图演示列堆叠与此基本列与行。我想要的是在这个堆叠柱状图中画一条线。
注意:我发现这个例子已经出现在stackoverflow中,堆叠栏与行,但不能真正使它成为堆叠列与行。
我使用的是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提琴。可以在这里勾选
我简直不敢相信它这么简单,我只是在用代码做实验,它就这么解决了。我所要做的就是添加一个新系列,并在每个系列中指定类型。
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 }
});
相关文章:
- 动态更改高图中的系列颜色
- 如何为高图中的区域线创建z索引
- 将高图饼图中的文本居中显示为响应
- 可以对一个图表进行高图深化,反映在另一个图表上
- 如何将数据标签与数据一起传递,以便在高图中的工具提示中显示
- 如何在悬停时更改高图的不透明度
- 升级到 jQuery 1.8 后出现高图缩放问题
- 高图3.0.7是否允许高图
- 指定饼图高图的颜色
- 高图热图:单击按钮或复选框时选择所有单元格
- 高图 - 分组/近似后保持多个系列之间的关系
- 高图折线图:点应该是可点击的,点之间的线不是.这可能吗
- 如何防止高图工具提示弹出隐藏,在图形区域或浏览器窗口上调整大小
- 数据库中的动态样条曲线高图
- 删除高图中的第一条和最后一条网格线
- 解决同时使用高图和树状图时的冲突(f.inArray 不是函数)
- 如何将页眉或徽标添加到高图导出的PDF中
- 用json文件加载一个高图
- 用表格中的数据反转高图上的轴
- 用按钮更改高图选项