vamseeachanta
vamseeachanta/workspace-hub
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/vamseeachanta/workspace-hub --skill highcharts命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Write outbound email and external messages in Vamsee Achanta's voice — a subtle offer to help, never bold or rash claims. Load before drafting ANY email, LinkedIn/Collide reply, proposal note, or outreach sent under his name.
Save/publish analysis or computation results from ANY ecosystem repo to Hugging Face as a queryable, viewer-renderable dataset. Use when the user wants to "save results to hugging face", "publish dataset to HF", "hugging face data saving", "save analysis results", "hf dataset", "make results queryable", or "render via datasets-server API". Reshapes nested results into flat parquet tables, writes a dataset card with a viewer `configs:` block and provenance, applies license/public-vs-private routing, enforces a domain data-quality gate (faithful-to-source != correct), publishes to `aceengineer/<repo>-<projection>`, and verifies via the datasets-server API.
Clone, create, fork, configure, and manage GitHub repositories. Manage remotes, secrets, releases, and workflows. Works with gh CLI or falls back to git + GitHub REST API via curl.
基于 SOC 职业分类
正在显示 SKILL.md
| name | highcharts |
| version | 1.0.0 |
| description | Create enterprise-grade interactive charts with Highcharts |
| author | workspace-hub |
| category | data-visualization |
| tags | ["charts","highcharts","enterprise","stock","maps","accessibility"] |
| platforms | ["web","javascript","typescript"] |
Create professional, enterprise-grade interactive charts with Highcharts - trusted by Fortune 500 companies worldwide.
Use Highcharts when you need:
License Note: Highcharts is free for non-commercial use. Commercial use requires a license.
Avoid when:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px;"></div>
<script>
Highcharts.chart('container', {
title: {
text: 'Monthly Sales'
},
subtitle: {
text: 'Source: Sales Department'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {
title: {
text: 'Sales (units)'
}
},
series: [{
name: 'Product A',
data: [29.9, 71.5, 106.4, 129.2, 144.0, ]
}],
: {
:
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Quarterly Revenue Comparison'
},
xAxis: {
categories: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
min: 0,
title: {
text: 'Revenue (thousands)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2023',
data: [49.9, 71.5, 106.4, 129.2]
}, {
name: '2024',
data: [83.6, 78.8, , ]
}]
});
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Browser Market Share'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
showInLegend: true
}
},
series: [{
name: 'Share',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 11.84
}, {
name: 'Edge',
y: 4.67
}, {
name: ,
:
}, {
: ,
:
}]
}]
});
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="container"></div>
<script>
// Load stock data from CSV
fetch('../data/stock_prices.csv')
.then(response => response.text())
.then(csvText => {
const lines = csvText.split('\n');
const data = [];
for (let i = 1; i < lines.length; i++) {
const row = lines[i].split(',');
if (row.length >= 2) {
const date = new Date(row[0]).getTime();
const price = parseFloat(row[1]);
data.push([date, price]);
}
}
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
: {
:
},
: [{
: ,
: data,
: {
:
}
}],
: {
:
},
: {
:
}
});
});
Highcharts.chart('container', {
title: {
text: 'Sales vs Profit Margin'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: [{
title: {
text: 'Sales'
}
}, {
title: {
text: 'Profit Margin (%)'
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
type: 'column',
name: 'Sales',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}, {
type: 'spline',
name: 'Profit Margin',
yAxis: 1,
data: [15.2, 16.8, 18.9, 19.3, 20.1, 21.4],
marker: {
enabled: true
},
dashStyle:
}]
});
Highcharts.chart('container', {
chart: {
type: 'heatmap'
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
},
yAxis: {
categories: ['Employee 1', 'Employee 2', 'Employee 3', 'Employee 4', 'Employee 5'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + ...[..] + +
.. + + ...[..] + ;
}
},
: [{
: ,
: ,
: [[, , ], [, , ], [, , ], [, , ], [, , ],
[, , ], [, , ], [, , ], [, , ], [, , ],
[, , ], [, , ], [, , ], [, , ], [, , ],
[, , ], [, , ], [, , ], [, , ], [, , ],
[, , ], [, , ], [, , ], [, , ], [, , ]],
: {
: ,
:
}
}]
});
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<div id="container"></div>
<script>
Highcharts.ganttChart('container', {
title: {
text: 'Project Timeline'
},
xAxis: {
min: Date.UTC(2024, 0, 1),
max: Date.UTC(2024, 11, 31)
},
series: [{
name: 'Project Tasks',
data: [{
name: 'Planning',
start: Date.UTC(2024, 0, 1),
end: Date.UTC(2024, 1, 15),
completed: 1
}, {
name: 'Development',
start: Date.(, , ),
: .(, , ),
: ,
:
}, {
: ,
: .(, , ),
: .(, , ),
: ,
:
}, {
: ,
: .(, , ),
: .(, , ),
: ,
:
}]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<div id="container"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 15,
beta: 15,
depth: 50,
viewDistance: 25
}
},
title: {
text: '3D Column Chart'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
title: {
text: 'Sales'
}
},
plotOptions: {
column: {
depth: 25
}
},
series: [{
: ,
: [, , , , ]
}]
});
Highcharts.chart('container', {
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(),
y = Math.random() * 100;
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Live Random Data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
:
}]
},
: {
: ,
:
},
: {
:
},
: {
:
},
: [{
: ,
: ( () {
data = [],
time = ( ()).(),
i;
(i = -; i <= ; i += ) {
data.({
: time + i * ,
: .() *
});
}
data;
}())
}]
});
Highcharts.chart('container', {
accessibility: {
enabled: true,
description: 'Chart showing sales trends over time',
keyboardNavigation: {
enabled: true
}
},
// ... rest of config
});
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y.toFixed(2);
}
}
Highcharts.chart('container', {
chart: {
height: (9 / 16 * 100) + '%' // 16:9 ratio
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
align: 'center',
verticalAlign: 'bottom',
layout: 'horizontal'
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -5
},
title: {
text: null
}
}
}
}]
}
});
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'separator',
'downloadCSV',
'downloadXLS'
]
}
}
}
<!-- Basic Highcharts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Stock Charts -->
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- Maps -->
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<!-- Gantt -->
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<!-- Additional modules -->
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
npm install highcharts
import Highcharts from 'highcharts';
import HighchartsStock from 'highcharts/modules/stock';
import HighchartsMap from 'highcharts/modules/map';
HighchartsStock(Highcharts);
HighchartsMap(Highcharts);
import * as Highcharts from 'highcharts';
const options: Highcharts.Options = {
title: {
text: 'TypeScript Example'
},
series: [{
type: 'line',
data: [1, 2, 3, 4, 5]
}]
};
Highcharts.chart('container', options);
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script>
Highcharts.chart('container', {
boost: {
useGPUTranslations: true,
usePreAllocated: true
},
series: [{
boostThreshold: 1, // Start boosting at 1 point
data: largeDataArray // 100,000+ points
}]
});
</script>
annotations: [{
labels: [{
point: {
x: 3,
y: 50,
xAxis: 0,
yAxis: 0
},
text: 'Important milestone'
}],
labelOptions: {
backgroundColor: 'rgba(255,255,255,0.5)',
borderColor: 'silver'
}
}]
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script>
Highcharts.chart('container', {
series: [{
data: [{
name: 'Category A',
y: 5,
drilldown: 'category-a'
}]
}],
drilldown: {
series: [{
id: 'category-a',
data: [
['Subcategory 1', 2],
['Subcategory 2', 3]
]
}]
}
});
</script>
// Apply custom theme
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00'],
chart: {
backgroundColor: '#f4f4f4',
style: {
fontFamily: 'Arial, sans-serif'
}
},
title: {
style: {
color: '#000',
font: 'bold 16px Arial'
}
}
});
import { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
function HighchartsComponent({ options }) {
const chartRef = useRef(null);
useEffect(() => {
const chart = Highcharts.chart(chartRef.current, options);
return () => {
chart.destroy();
};
}, [options]);
return <div ref={chartRef} />;
}
<template>
<div ref="chartContainer"></div>
</template>
<script>
import Highcharts from 'highcharts';
export default {
props: ['options'],
mounted() {
this.chart = Highcharts.chart(this.$refs.chartContainer, this.options);
},
beforeUnmount() {
if (this.chart) {
this.chart.destroy();
}
},
watch: {
options: {
deep: true,
handler(newOptions) {
this.chart.update(newOptions);
}
}
}
};
</script>
Use this skill for enterprise-grade, professional charts with extensive features and support!