Highcharts.setOptions({lang :{
rangeSelectorZoom : "",
rangeSelectorFrom : "由",
rangeSelectorTo : "至",
noData : "沒有相關資料",
}});
var productChart = {
chart : null,
chart2 : null,
mode : "desktop",
wtype : null,
init : function(code, callback){
var self = this;
self.mode = (window.innerWidth<991)?"mobile":"desktop";
self.wtype = (code.endsWith("C") || code.endsWith("B") || code.endsWith("X") || code.endsWith("Y"))?"cbbc":"warrant";
$.getJSON('/?q=/'+lang+'/data/chart/productChart/code/'+code, function(_data) {
var data = self.decode(_data);
$('#productChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
self.chart = chart;
self.drawBackground();
});
});
},
decode : function(_data){
return _data.mainData;
},
colors : {line1 : "#007DB7", line2: "#DC6801", bar1 : "#FDCD07", bar2 : "#04BDD3", bar3 : "#79D5F3"},
margin : {mobile: 40, desktop: 90},
getJSON : function(data){
var last = [];
var ulast = [];
var bar1 = [];
var bar2 = [];
var bar3 = [];
var candle1 = [];
var candle2 = [];
for (i = 0; i < data.length; i++) {
last.push([data[i]["ts"], data[i]["last"]]);
ulast.push([data[i]["ts"], data[i]["ulast"]]);
bar1.push([data[i]["ts"], data[i]["vol"]]);
bar2.push([data[i]["ts"], data[i]["uvol"]]);
bar3.push([data[i]["ts"], data[i]["os"]]);
// candle1.push([data[i]["ts"], data[i]["open"], data[i]["high"], data[i]["low"], data[i]["close"]]);
// candle2.push([data[i]["ts"], data[i]["uopen"], data[i]["uhigh"], data[i]["ulow"], data[i]["uclose"]]);
candle1.push([data[i]["ts"], data[i]["open"], data[i]["high"], data[i]["low"], data[i]["low"]]);
candle2.push([data[i]["ts"], data[i]["uopen"], data[i]["uhigh"], data[i]["ulow"], data[i]["ulow"]]);
}
var self = this;
return {
chart : {
marginLeft: self.margin[self.mode],
marginRight: self.margin[self.mode],
spacingTop: 0,
events: {
redraw: function(event) {
self.redraw();
}
}
},
plotOptions: {
line: {
events: {
legendItemClick: function () {
return false;
},
}
}
},
tooltip: {
useHTML: true,
formatter: function() {
var _html = "";
var i = 0;
if(typeof this.points[2] != "undefined"){
_html = '
' + Highcharts.dateFormat('%m/%d', this.x) + '';
if(this.points[i].series.name == self.labels[lang][self.wtype].legend1){
_html += '
'+self.labels[lang][self.wtype].tooltip1+' ' + this.points[i].y + '';
i++;
}
if(this.points[i].series.name == self.labels[lang][self.wtype].legend2){
_html += '
'+self.labels[lang][self.wtype].tooltip2+' ' + (this.points[i].y);
i++;
}
_html += '
' + this.points[i].series.name + ' ' + (this.points[i].y);
i++;
_html += '
' + this.points[i].series.name + ' ' + (this.points[i].y);
i++;
_html += '
'+self.labels[lang][self.wtype].legend5+' ' + (this.points[i].y) + "
";
}
if(_html == ""){
return false;
}
return _html;
}
},
rangeSelector : {
selected : 1,
height: 55,
buttons: [{
type: 'day',
count: 5,
text: '5日'
}, {
type: 'month',
count: 1,
text: '1個月'
}, {
type: 'month',
count: 2,
text: '2個月'
}, {
type: 'month',
count: 3,
text: '3個月'
// }, {
// type: 'all',
// text: '全部'
}],
allButtonsEnabled : true,
inputBoxHeight: 20,
inputBoxWidth: 100,
inputDateFormat: '%Y-%m-%d',
// inputEditDateFormat: '%d-%m-%Y',
buttonPosition: {
x: 0,
},
inputPosition: {
x: 270*((self.mode == "desktop")?1:-1),
y: 2,
align : "left"
},
inputStyle: {
"fontSize": "14px",
},
labelStyle: {
"fontSize": "14px",
},
buttonSpacing : 0,
buttonTheme: {
fill: 'none',
padding: 6,
stroke: '#FFCC07',
'stroke-width': 1,
style: {
color: '#000',
fontWeight: 'bold'
},
states: {
select: {
fill: '#FFCC07',
stroke: '#FFCC07',
},
hover:{
fill: '#FFCC07',
stroke: '#FFCC07',
}
// disabled: { ... }
}
},
},
xAxis:{
type: 'datetime',
lineWidth: 0,
gridLineWidth: 0,
tickColor: '#00000000',
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
},
visible: false,
},
yAxis: [
{
top:375,
height: 130,
offset: 0,
title: {
text: null,
},
labels:{
align:'right',
y:5,
x:-5,
formatter: function () {
return (this.isFirst)?"":this.value;
}
},
tickAmount : 5,
tickPixelInterval:30,
opposite: false,
},{
top:375,
height: 130,
offset: 0,
title: {
text: null,
},
labels:{
align:'left',
y:5,
x:5,
formatter: function () {
return (this.isFirst)?"":this.value;
}
},
tickAmount : 5,
tickPixelInterval:30,
opposite: true,
},{
top:550,
height: 130,
offset: 0,
title: {
text: null,
},
labels:{
align:'left',
y:5,
x:5,
formatter: function () {
return (this.isFirst)?"":this.value;
}
},
tickAmount : 5,
tickPixelInterval:30,
opposite: true,
},{
offset: 0,
title: {
useHTML: true,
margin: 20,
text: this.labels[lang][this.wtype].yTitle1,
rotation: 0,
},
labels:{
align:'left',
y:5,
x:5,
formatter: function () {
return this.value.toFixed(2);
}
},
tickAmount : 7,
height: 295,
},
{
offset: 0,
title: {
useHTML: true,
margin: 20,
text: this.labels[lang][this.wtype].yTitle2,
rotation: 0,
},
labels:{
align:'right',
y:5,
x:-5,
formatter: function () {
return this.value.toFixed(1);
}
},
tickAmount : 7,
opposite: false,
height: 295,
},
],
navigator : {
enabled : true,
top:730,
xAxis:{
labels: {
formatter: function () {
return Highcharts.dateFormat('%m/%d', this.value);
}
}
},
},
scrollbar : {
enabled : false
},
series : [{
id : '1',
name : this.labels[lang][this.wtype].legend1,
data : last,
yAxis: 3,
color : this.colors["line1"],
},
{
id : '2',
name : this.labels[lang][this.wtype].legend2,
data : ulast,
// yAxis: 1,
yAxis: 4,
color : this.colors["line2"],
},
{
id : '3',
name : this.labels[lang][this.wtype].legend2,
data : candle2,
type : 'candlestick',
// yAxis: 1,
yAxis: 4,
color : this.colors["line2"],
visible : false,
},
{
name : this.labels[lang][this.wtype].legend4,
data : bar2,
type: 'column',
// stacking: 'normal',
// yAxis: 2,
yAxis: 0,
color : this.colors["bar2"],
},
{
name : this.labels[lang][this.wtype].legend3,
data : bar1,
type: 'column',
// stacking: 'normal',
// yAxis: 3,
yAxis: 1,
color : this.colors["bar1"],
},
{
name : this.labels[lang][this.wtype].legend5,
data : bar3,
type: 'column',
// stacking: 'normal',
// yAxis: 4,
yAxis: 2,
color : this.colors["bar3"],
},
],
exporting: {
enabled: false
}
};
},
redraw: function(){
var chart = this.chart;
var offsetx,offsety;
var self = this;
$("#chartBackground1").remove();
$("#chartBackground2").remove();
$("#chartBackground3").remove();
$("#chartLegend1").remove();
$("#chartLegend2").remove();
$("#chartFlag1").remove();
$("#chartFlag2").remove();
chart.renderer.rect(self.margin[self.mode], 55, chart.plotWidth, 295, 0).attr({
fill: '#F9F9F9',
stroke: '#C0C0C0',
'stroke-width': 1,
id :'chartBackground1',
}).add();
chart.renderer.rect(self.margin[self.mode], 55+295+25, chart.plotWidth, 130, 0).attr({
fill: '#F9F9F9',
stroke: '#C0C0C0',
'stroke-width': 1,
id :'chartBackground2',
}).add();
chart.renderer.rect(self.margin[self.mode], 55+295+25+175, chart.plotWidth, 130, 0).attr({
fill: '#F9F9F9',
stroke: '#C0C0C0',
'stroke-width': 1,
id :'chartBackground3',
}).add();
offsetx = self.margin[self.mode];
offsety = 55;
chart.renderer.rect(offsetx+15,offsety+13, 15, 2, 0).attr({
fill: this.colors["line1"],
'stroke-width': 0,
id :'chartFlag1',
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend1, offsetx + 35, offsety+18).css({
fontSize: '12px',
}).attr({
id :'chartLegend1',
}).add();
chart.renderer.rect(offsetx+15+100,offsety+13, 15, 2, 0).attr({
fill: this.colors["line2"],
'stroke-width': 0,
id :'chartFlag2',
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend2, offsetx + 35+100, offsety+18).css({
fontSize: '12px',
}).attr({
id :'chartLegend2',
}).add();
},
drawBackground: function(){
var chart = this.chart;
var offsetx,offsety;
var self = this;
this.redraw();
if (self.mode == "desktop"){
chart.renderer.image('/home/images/chart/icon_calendar.png', 245, 0, 30, 30).add();
}
offsetx = self.margin[self.mode];
offsety = 520;
chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
fill: this.colors["bar1"],
'stroke-width': 0,
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend3, offsetx + 20, offsety+12).css({
fontSize: '11px'
}).add();
offsetx = self.margin[self.mode]+128;
offsety = 520;
chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
fill: this.colors["bar2"],
'stroke-width': 0,
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend4, offsetx + 20, offsety+12).css({
fontSize: '11px'
}).add();
offsetx = self.margin[self.mode];
offsety = 700;
chart.renderer.rect(offsetx,offsety, 15, 15, 0).attr({
fill: this.colors["bar3"],
'stroke-width': 0,
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend5, offsetx + 20, offsety+12).css({
fontSize: '12px'
}).add();
/*chart.renderer.rect(offsetx+125,offsety, 15, 15, 0).attr({
fill: this.colors["bar2"],
'stroke-width': 0,
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend4, offsetx + 20+125, offsety+12).css({
fontSize: '12px'
}).add();
chart.renderer.rect(offsetx+250,offsety, 15, 15, 0).attr({
fill: this.colors["bar3"],
'stroke-width': 0,
}).add();
chart.renderer.text(this.labels[lang][this.wtype].legend5, offsetx + 20+250, offsety+12).css({
fontSize: '12px'
}).add(); */
},
showSeries : function(id){
var chart = this.chart;
var self = this;
var selected = chart.rangeSelector.selected;
chart.get(id).show();
var yAxisID = (id == '1' ? 3 : 4);
chart.yAxis[yAxisID].userOptions.title.text = (id == '1' ? this.labels[lang][this.wtype].yTitle1 : this.labels[lang][this.wtype].yTitle2);
chart.yAxis[yAxisID].update();
if(selected != null){
chart.rangeSelector.clickButton(selected);
}
},
hideSeries : function(id){
var chart = this.chart;
var self = this;
var selected = chart.rangeSelector.selected;
chart.get(id).hide();
var yAxisID = (id == '1' ? 3 : 4);
chart.yAxis[yAxisID].userOptions.title.text = "";
chart.yAxis[yAxisID].update();
if(selected != null){
chart.rangeSelector.clickButton(selected);
}
},
labels : {
tc :{
warrant:{
yTitle1 : "權
證
價
格
︵
元
︶",
yTitle2 : "標
的
價
格
︵
元
︶",
tooltip1 : "權證價格 (元)",
tooltip2 : "標的價格 (元)",
legend1 : "權證價格",
legend2 : "標的",
legend3 : "權證成交量 (張)",
legend4 : "標的成交量 (張)",
legend5 : "流通在外",
million : "千元",
},
cbbc:{
yTitle1 : "牛
熊
證
價
格
︵
元
︶",
yTitle2 : "標
的
價
格
︵
元
︶",
tooltip1 : "權證價格 (元)",
tooltip2 : "標的價格 (元)",
legend1 : "牛熊證價格",
legend2 : "標的價格",
legend3 : "牛熊證成交量 (張)",
legend4 : "標的成交量 (張)",
legend5 : "流通在外",
million : "千元",
}
},
sc :{
},
en :{},
},
}