英文:
How to draw a column/bar graph or something like timeline from the following data
问题
从上面的数据中，需要绘制一个时间轴，其中不同颜色表示滚筒经过的次数。
尝试过以下的highcharts：
- 柱状图
- 热力图
- 树状图
但未能如预期般生成结果。
英文:
I have the following data
From the above data the need is to draw a timeline of the vechicle with different color for differnet number of times the rollers passed i.e.
I am unable to map the data points on chart or some vertical time line
Have tried using following highcharts:
- column chart
- heat maps
- treemap
But unable to generate results as expected
答案1
得分: 1
你可以将它制作成一个堆叠柱状图，只需一个柱子：
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Distances',
align: 'left',
},
xAxis: {
categories: [''],
},
yAxis: {
min: 0,
title: {
text: 'distance in m'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
textOutline: 'none'
}
}
},
legend: {
layour: 'horizontal',
anchor: 'right',
verticalAlign: 'bottom',
borderWidth: 1,
shadow: false
},
tooltip: {
pointFormatter(original){
return `<span style="color:${this.color}">●</span> from: ${this.stackY-this.y} to: ${this.stackY}`;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
//enabled: true
}
}
},
series: [
{
name: '2',
data: [62],
color: 'orange',
showInLegend: false
},
{
name: '1',
data: [48],
color: 'red',
showInLegend: false
},{
name: '2',
data: [26],
color: 'orange',
showInLegend: false
},{
name: '4',
data: [49],
color: 'green'
},{
name: '3',
data: [2],
color: 'darkgreen'
},{
name: '2',
data: [7],
color: 'orange',
showInLegend: false
},{
name: '3',
data: [2],
color: 'red',
showInLegend: false
},{
name: '2',
data: [45],
color: 'orange'
},{
name: '1',
data: [10],
color: 'red'
},]
});
<div id="container" style="width:250px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
英文:
You can make it a column-stacked chart with just one column:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-js -->
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Distances',
align: 'left',
},
xAxis: {
categories: [''],
},
yAxis: {
min: 0,
title: {
text: 'distance in m'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
textOutline: 'none'
}
}
},
legend: {
layour: 'horizontal',
anchor: 'right',
//x: 0,
verticalAlign: 'bottom',
borderWidth: 1,
shadow: false
},
tooltip: {
pointFormatter(original){
return `<span style="color:${this.color}">●</span> from: ${this.stackY-this.y} to: ${this.stackY}`;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
//enabled: true
}
}
},
series: [
{
name: '2',
data: [62],
color: 'orange',
showInLegend: false
},
{
name: '1',
data: [48],
color: 'red',
showInLegend: false
},{
name: '2',
data: [26],
color: 'orange',
showInLegend: false
},{
name: '4',
data: [49],
color: 'green'
},{
name: '3',
data: [2],
color: 'darkgreen'
},{
name: '2',
data: [7],
color: 'orange',
showInLegend: false
},{
name: '3',
data: [2],
color: 'red',
showInLegend: false
},{
name: '2',
data: [45],
color: 'orange'
},{
name: '1',
data: [10],
color: 'red'
},]
});
<!-- language: lang-html -->
<div id="container" style="width:250px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<!-- end snippet -->
Of course, the data in the series can be generated by a function taking the data from an original format and automatting some structures, like adding showInLegend: false for the categories that were already represented in the legend.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论