本文整理汇总了TypeScript中highcharts.setOptions函数的典型用法代码示例。如果您正苦于以下问题:TypeScript setOptions函数的具体用法?TypeScript setOptions怎么用?TypeScript setOptions使用的例子?那么, 这里精选的函数代码示例或许可以为您提供帮助。
在下文中一共展示了setOptions函数的6个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。
示例1: setHighchartsColors
setHighchartsColors(){
const Highcharts = require('highcharts');
Highcharts.setOptions({
colors: ['#6D7991', '#DD6600', '#61AEE1', '#EE2525', '#E8C54F', '#009E4A' ]
});
}
示例2:
export function highchartsFactory() {
const hc = require('highcharts');
const hcMore = require('highcharts/highcharts-more');
hc.setOptions(vdlChartingPalette);
hcMore(hc);
return hc;
}
示例3:
fontSize: '12px',
rotation: 0
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
scrollbar: {
enabled: false,
},
// special colors for some of the
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
Highstock.setOptions(Highstock.theme);
export {}
示例4: require
import 'hammerjs';
import * as moment from 'moment';
moment.locale('pl-pl');
import * as Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/accessibility')(Highcharts);
require('highcharts/modules/no-data-to-display')(Highcharts);
Highcharts.setOptions({
lang: {
noData: 'EWALUACJA DANYCH',
months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień',
'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień',
'Październik', 'Listopad', 'Grudzień'],
shortMonths: ['sty', 'lut', 'mar', 'kwi', 'maj', 'cze', 'lip', 'sie', 'wrz', 'paź', 'lis', 'gru'],
weekdays: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwartek', 'Piątek', 'Sobota'],
}
});
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
示例5: setTheme
private setTheme(): void {
Highcharts['createElement']('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts['theme'] = {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee',
'#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
chart: {
backgroundColor: 'rgba(255, 255, 255, 0.1)',
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#606063'
},
xAxis: {
gridLineColor: '#FFFFFF',
gridLineWidth: 1,
gridLineDashStyle: 'Dot',
labels: {
style: {
color: '#FFFFFF'
}
},
lineColor: '#FFFFFF',
minorGridLineColor: '#FFFFFF',
tickColor: '#FFFFFF',
title: {
style: {
color: '#FFFFFF'
}
}
},
yAxis: {
gridLineColor: '#FFFFFF',
gridLineDashStyle: 'Dot',
labels: {
style: {
color: '#FFFFFF'
}
},
lineColor: '#FFFFFF',
minorGridLineColor: '#FFFFFF',
tickColor: '#FFFFFF',
tickWidth: 1,
title: {
style: {
color: '#FFFFFF'
}
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#FFFFFF'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
credits: {
style: {
color: '#FFFFFF'
}
}
};
// Apply the theme
Highcharts.setOptions(Highcharts['theme']);
}
示例6: function
link: function (scope, element, attributes, controller) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
let chartElement = element[0];
if (scope.type && scope.type.startsWith('area')) {
initSynchronizedCharts();
}
let lastOptions;
scope.$watch('options', function (newOptions) {
setTimeout(function () {
displayChart(newOptions, chartElement);
lastOptions = newOptions;
});
});
function onWindowResized() {
setTimeout(function () {
onResize();
}, 100);
}
angular.element(controller.$window).bind('resize', function() {
onWindowResized();
});
scope.$on('onWidgetResize', function () {
onWindowResized();
});
function onResize() {
displayChart(lastOptions, chartElement);
}
function initSynchronizedCharts() {
element.bind('mousemove touchmove touchstart', function (e) {
let chart, i, event, points;
for (i = 0; i < Highcharts.charts.length; i++) {
chart = Highcharts.charts[i];
if (chart && chart.pointer) {
if (e.originalEvent) {
event = chart.pointer.normalize(e.originalEvent);
} else {
event = chart.pointer.normalize(e);
}
points = _.map(chart.series, (serie: any) => {
return serie.searchPoint(event, true);
});
points = _.filter(points, function (point) {
return point;
});
(e as any).points = points;
if (points.length && points[0] && points[0].series.area) {
points[0].highlight(e);
}
}
}
});
(Highcharts as any).Pointer.prototype.reset = function () {
let chart;
for (let i = 0; i < Highcharts.charts.length; i++) {
chart = Highcharts.charts[i];
if (chart) {
if (chart.tooltip) {
chart.tooltip.hide(this);
}
if (chart.xAxis[0]) {
chart.xAxis[0].hideCrosshair();
}
}
}
};
(Highcharts as any).Point.prototype.highlight = function (event) {
if (event.points.length) {
this.onMouseOver();
this.series.chart.tooltip.refresh(event.points);
this.series.chart.xAxis[0].drawCrosshair(event, this);
}
};
}
function displayChart(newOptions, chartElement) {
if (newOptions) {
newOptions = _.merge(newOptions, {
lang: {
noData: '<code>No data to display</code>'
},
noData: {
useHTML: true
}
});
//.........这里部分代码省略.........