1
嗨我試圖在一個頁面上顯示不同類型的多個Highcharts圖表, 但是,我能夠一次只顯示一個圖表。如何在一個頁面上顯示多個Highcharts圖表
這裏是我的代碼來顯示餅圖:
$ ->
# Note: scheme_distribution is like [['Gold': 50],['Equity': 5],['Debt': 45]]
scheme_distribution = $("#scheme_distribution_chart").data('distribution')
###
# Create the chart when all data is loaded
# @returns {undefined}
###
$ ->
chart = new (Highcharts.Chart)({
chart:
renderTo: 'scheme_distribution_chart'
type: 'pie'
plotOptions:
pie:
innerSize: '60%'
dataLabels:
enabled: false
tooltip:
headerFormat: '<span style="color:{point.color}">\u25CF</span><small> {point.key}</small>: ',
pointFormat:'<b>{point.y}%</b><br/>'
series: [ { data: scheme_distribution } ]
title:
text: 'Portfolio'
}, (chart) ->
# on complete
textX = chart.plotLeft + chart.series[0].center[0]
textY = chart.plotTop + chart.series[0].center[1]
span = '<span id="pieChartInfoText" style="position:relative; text-align:center;">'
span += '<span style="font-size: 14px">' + scheme_distribution[0][0] + ' ' + scheme_distribution[0][1] + '%</span><br>'
span += '<span style="font-size: 14px">' + scheme_distribution[1][0] + ' ' + scheme_distribution[1][1] + '%</span><br>'
span += '<span style="font-size: 14px">' + scheme_distribution[2][0] + ' ' + scheme_distribution[2][1] + '%</span><br>'
span += '</span>'
$('#addText').append span
span = $('#pieChartInfoText')
span.css 'left', textX + span.width() * -0.4
span.css 'top', textY + span.height() * -0.5
return
)
return
,這裏是我的展示系列圖形代碼:
$ ->
seriesOptions = []
seriesCounter = 0
names = [
'good'
'bad'
'average'
]
current_time = new Date();
# set data
scenario = $("#portfolio_chart").data('scenario')
###
# Create the chart when all data is loaded
# @returns {undefined}
###
createChart = ->
$('#portfolio_chart').highcharts 'StockChart',
legend:
enabled: true
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
y:25
rangeSelector: selected: 5
yAxis:
labels: formatter: ->
(if @value > 0 then ' + ' else '') + @value + '%'
plotLines: [ {
value: 0
width: 2
color: 'silver'
} ]
plotOptions:
series:
compare: 'value'
turboThreshold: 0
tooltip:
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>'
valueDecimals: 2
formatter: ->
if this.x > current_time
good = this.points[0]
average = this.points[2]
bad = this.points[1]
date = '<b><span style="color: black"><b>Date:</b> ' + new Date(good.x) + '</span></b><br>'
good_tooltip = '<span style="color:' + good.color + '">' + good.series.name + '</span> : <b>' + good.y + '</b> <br>'
average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>'
bad_tooltip = '<span style="color:' + bad.color + '">' + bad.series.name + '</span> : <b>' + bad.y + '</b> <br>'
return date + good_tooltip + average_tooltip + bad_tooltip;
else
average = this.points[2]
date = '<span style="color: black"><b>Date:</b> ' + new Date(average.x) + '</span></b><br>'
average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>'
return date + average_tooltip;
series: seriesOptions
return
$.each names, (i, name) ->
seriesOptions[i] =
name: name
data: scenario[name]
type: 'spline'
# As we're loading the data asynchronously, we don't know what order it will arrive. So
# we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1
if seriesCounter == names.length
createChart()
其次,第二個圖形的js也可以用來顯示不同的圖形頁面爲不同的數據系列。 但它一次只顯示一張圖。 我知道查詢是相當絕對的,但我不知道如何解釋這個以任何其他方式。
有關如何解決此問題的任何幫助或建議,我們感激不盡。
謝謝!
編輯 如果您需要任何進一步的說明或更多的代碼,我如何做到這一點,我準備提供它。
scheme_distribution_chart並在HTML目前portfolio_chart? – Thorin
http://jsfiddle.net/7cvCX/313/ –
嗨@Ansar是的,他們是在同一頁上。 – VoidZero