使用highcharts的可滚动堆叠柱形图?
我需要创建一个堆叠柱形图,以显示为需求捕获的数据,如下所示 显示员工在不同项目(项目1、项目2、项目3)下的工作时间 我试着用海图。当我尝试为图表启用可滚动功能时,由于可能会有更多的员工,标签(员工姓名)不会显示在X轴上 此外,滚动似乎是不正确的 有人能帮我把这张图表做成可滚动的,并且在X轴上以标签的形式显示员工姓名吗 我已经分享了我在中创建的图表 代码也如下所示:, $(函数(){ $(“#容器”).highcharts('StockChart'{使用highcharts的可滚动堆叠柱形图?,charts,highcharts,scrollable,stacked,Charts,Highcharts,Scrollable,Stacked,我需要创建一个堆叠柱形图,以显示为需求捕获的数据,如下所示 显示员工在不同项目(项目1、项目2、项目3)下的工作时间 我试着用海图。当我尝试为图表启用可滚动功能时,由于可能会有更多的员工,标签(员工姓名)不会显示在X轴上 此外,滚动似乎是不正确的 有人能帮我把这张图表做成可滚动的,并且在X轴上以标签的形式显示员工姓名吗 我已经分享了我在中创建的图表 代码也如下所示:, $(函数(){ $(“#容器”).highcharts('StockChart'{ chart: {
chart: {
type: 'column',
inverted:true
},
title: {
text: 'Total Hours worked Vs Different Projects'
},
xAxis: {
categories: ['user1', 'user2', 'user3', 'user4', 'user5','user6', 'user7', 'user8', 'user9', 'user10','user11', 'user12', 'user13', 'user14', 'user15','user16', 'user17', 'user18', 'user19', 'user20'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Total Hours Worked'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'red'
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
scrollbar: {
enabled:true
},
rangeSelector: {
enabled: false
},
series: [{
name: 'Project1',
data: [5, 3, 4, 7, 2,5, 3, 4, 7, 2 ,5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}, {
name: 'Project2',
data: [2, 2, 3, 2, 1,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}, {
name: 'Projecct3',
data: [3, 4, 4, 2, 5,5, 3, 4, 7, 2, 5, 3, 4, 7, 2,5, 3, 4, 7, 2]
}]
});
}));
谢谢
Sri您可以使用amCharts制作滚动/堆叠柱状图: 守则:
AmCharts.ready(function () {
var chartData = [
{category:"user1", val1:1, val2:1, val3:1},
{category:"user2", val1:2, val2:1, val3:2},
{category:"user3", val1:1, val2:1, val3:4},
{category:"user4", val1:2, val2:1, val3:2},
{category:"user5", val1:1, val2:1, val3:5},
{category:"user6", val1:2, val2:1, val3:2},
{category:"user7", val1:1, val2:1, val3:3},
{category:"user8", val1:2, val2:1, val3:1},
{category:"user9", val1:1, val2:1, val3:3},
{category:"user10", val1:2, val2:1, val3:4},
{category:"user11", val1:1, val2:1, val3:3},
{category:"user12", val1:2, val2:1, val3:3},
{category:"user13", val1:1, val2:1, val3:3},
{category:"user14", val1:2, val2:1, val3:1}
];
var chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/images/";
chart.dataProvider = chartData;
chart.categoryField = "category";
var valueAxis = new AmCharts.ValueAxis();
valueAxis.stackType = "regular";
valueAxis.totalText = "[[total]]";
chart.addValueAxis(valueAxis);
var graph1 = new AmCharts.AmGraph();
graph1.valueField = "val1";
graph1.type = "column";
graph1.fillAlphas = 1;
chart.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "val2";
graph2.type = "column";
graph2.fillAlphas = 1;
chart.addGraph(graph2);
var graph3 = new AmCharts.AmGraph();
graph3.valueField = "val3";
graph3.type = "column";
graph3.fillAlphas = 1;
chart.addGraph(graph3);
var chartScrollbar = new AmCharts.ChartScrollbar();
chart.addChartScrollbar(chartScrollbar);
chart.write("chartdiv");
});
这是因为在highstock中使用了highstock中不支持的类别。因此,您可以用highcharts替换它