【发布时间】：2016-09-09 03:41:21
【问题描述】：
您好，我正在尝试在一页上显示多个不同类型的 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 和portfolio_chart 出现在HTML 上吗？
-
嗨@Ansar 是的，他们在同一页上。
-
嗨@zubair，感谢您的回复，我想我在问题描述中遗漏了一些内容。您显示的图表 A 只是一个饼图，但是我想在同一页面中显示多个饼图，其中包含不同的数据，我如何在同一个 js 中实现这一点。感谢您的帮助。
-
您必须为多个这样的图表创建多个对象jsfiddle.net/7cvCX/314
标签： javascript ruby-on-rails-4 graph highcharts coffeescript