Chart / dataset /web /Vchart /bar /chart_0019_bar.html
Pekku's picture
Upload folder using huggingface_hub
79dc9c8 verified
<div id="chart" style="width:100%;height:520px;"></div>
<script src="_deps/cdn.jsdelivr.net/npm/@visactor/vchart/build/index.min.js"></script>
<script>
// 这里粘贴你的那段 JS 代码
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{
State: 'WY',
Age: 'Under 5 Years',
Population: 25635
},
{
State: 'WY',
Age: '5 to 13 Years',
Population: 1890
},
{
State: 'WY',
Age: '14 to 17 Years',
Population: 9314
},
{
State: 'DC',
Age: 'Under 5 Years',
Population: 30352
},
{
State: 'DC',
Age: '5 to 13 Years',
Population: 20439
},
{
State: 'DC',
Age: '14 to 17 Years',
Population: 10225
},
{
State: 'VT',
Age: 'Under 5 Years',
Population: 38253
},
{
State: 'VT',
Age: '5 to 13 Years',
Population: 42538
},
{
State: 'VT',
Age: '14 to 17 Years',
Population: 15757
},
{
State: 'ND',
Age: 'Under 5 Years',
Population: 51896
},
{
State: 'ND',
Age: '5 to 13 Years',
Population: 67358
},
{
State: 'ND',
Age: '14 to 17 Years',
Population: 18794
},
{
State: 'AK',
Age: 'Under 5 Years',
Population: 72083
},
{
State: 'AK',
Age: '5 to 13 Years',
Population: 85640
},
{
State: 'AK',
Age: '14 to 17 Years',
Population: 22153
}
]
}
],
yField: 'State',
xField: 'Population',
seriesField: 'Age',
direction: 'horizontal',
stack: true,
stackCornerRadius: 1000,
percent: true,
legends: {
visible: true
},
axes: [
{
orient: 'top',
label: {
formatMethod: val => {
return `${(val * 100).toFixed(2)}%`;
}
}
}
]
};
const vchart = new VChart.default(spec, { dom: "chart" });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
// 只要记得:dom 要写成 "chart"
</script>