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