[英]Draw a chart using highchart.js
我對數據可視化非常陌生。 當前,我們需要使用HighChart.js繪制類似於以下的圖表
請參閱jsfiddle: http : //jsfiddle.net/rgpz2ru5/22/了解我到目前為止的嘗試。 我能夠成功繪制圖表,但在datalabel和point之間繪制線時遇到問題(如上圖所示)? 你能幫忙嗎?
參見下面的代碼繪制圖表:
$('#container').highcharts({
chart: {
type: 'scatter',
},
xAxis: {
visible: false
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
return null
}
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
inside: false,
formatter: function(){
console.log("X"+this.x)
console.log("this.x%2"+this.x%2)
if(this.x%2 == 0){
console.log("in if")
return "<div style='position: relative;height:70px; border-left:solid thin #ff0000;margin-left:10px'><span style='position: absolute;bottom: 0;right: 0;'>hello</span></div>";
}else{
console.log("in else")
return "<span style='color:black'>"+this.key+"</span><div style='height:70px; border-left:solid thin #ff0000;margin-left:10px'/>";
}
},
useHTML:true
}
},scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: false,
lineColor: "#ffb74d"
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
data: [{
x: 1,
y: 1,
dataLabels: {
y: -80
},
marker: {
radius: 3
},
name: 'SDS',
color: "#ffb74d"
}, {
x: 2,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 5
},
name: 'MIP',
color:"#ffe0b2"
}, {
x: 3,
y: 1,
dataLabels: {
y: -80,
distance : 50,
softConnector : false,
connectorColor : '#D0D0D0',
},
marker: {
radius: 7
},
name: 'MDP',
color:"#ff9800"
},{
x: 4,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 9
},
name: 'RAD',
color:"#ffb74d"
},{
x: 5,
y: 1,
dataLabels: {
y: -80
},
marker: {
radius: 3
},
name: 'SDS',
color: "#ffb74d"
}, {
x: 6,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 5
},
name: 'MIP',
color:"#ffe0b2"
}, {
x: 7,
y: 1,
dataLabels: {
y: -80
},
marker: {
radius: 7
},
name: 'MDP',
color:"#ff9800"
},{
x: 8,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 9
},
name: 'RAD',
color:"#ffb74d"
},{
x: 9,
y: 1,
dataLabels: {
y: -80
},
marker: {
radius: 3
},
name: 'SDS',
color: "#ffb74d"
}, {
x: 10,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 5
},
name: 'MIP',
color:"#ffe0b2"
}, {
x: 11,
y: 1,
dataLabels: {
y: -80
},
marker: {
radius: 7
},
name: 'MDP',
color:"#ff9800"
},{
x: 12,
y: 1,
dataLabels: {
y: 80
},
marker: {
radius: 9
},
name: 'RAD',
color:"#ffb74d"
}]
}]
});
你能幫忙嗎?
您的圖表似乎屬於特定種類。 我個人之前從未見過任何此類可視化。 另外,在與HighCharts合作之后,我懷疑是否可以將任何type
的highchart轉換為您自己的。
但是,在您的圖形上初看時,以下想法在我的腦海中出現了。
您可以使用基本的html和css實現這種可視化。
假設您了解Angular術語。 我建議您列出所有價值觀。 將它們循環到一個簡單的div中,如下所示:
<div ng-repeat = "c in pointsList" > </div>
接下來,您可以使用ng-style
或ng-class
向每個div添加動態CSS。
看到您的圖,我假設您僅遵循css屬性:1. border-radius
2. background-color
3. width
4. height
似乎您對每種氣泡類型都有固定的類別。 因此,您可以在CSS中創建幾個固定的類,並根據您的點的類型動態地應用它們。 基本上,它看起來像:
<div ng-repeat = "c in pointsList" ng-class = "{'css1' : c.type1, 'css2' : c.type2}" > </div>
與此同時,您將需要應用display: inline-block
將所有divs
排成一行。
我知道,它的解決方案太幼稚,但是如果您對此類圖表的要求有限,則可以通過最少的調整來幫助您實現。
要制作類似的圖表,您可以使用氣泡圖: http : //jsfiddle.net/rgpz2ru5/
或標准散點圖: http : //jsfiddle.net/rgpz2ru5/1/
您可以使用marker.radius參數更改散布的標記大小:
marker: {
radius: 5,
states: {
hover: {
lineColor: "#ffb74d"
}
}
},
您可以使用chart.renderer.path和chart.renderer.label添加標簽: http : //api.highcharts.com/highcharts/Renderer.path http://api.highcharts.com/highcharts/Renderer.label
var drawLabels = function(chart) {
$('.cLabels').remove();
var series = chart.series,
renderer = chart.renderer,
plotTop = chart.plotTop,
plotLeft = chart.plotLeft;
Highcharts.each(series, function(s) {
Highcharts.each(s.data, function(p) {
renderer.path(['M', p.plotX + plotLeft, p.plotY + plotTop, 'L', p.plotX + plotLeft, p.plotY + plotTop - 30]).attr({
stroke: 'black',
'stroke-width': 1
}).addClass('cLabels').add();
renderer.label(p.name, p.plotX + plotLeft, p.plotY + plotTop - 50).attr({
'text-anchor': 'middle',
padding: 0
}).addClass('cLabels').add();
});
});
}
在這里,您可以看到一個示例它如何工作的: http : //jsfiddle.net/rgpz2ru5/29/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.