如何在FusionCharts中绘制多列柱状图
How to draw multi-series column chart in FusionCharts
本文关键字:绘制 FusionCharts 更新时间:2023-09-26
我正在使用asp.net c#开发一个web应用程序,并使用FusionCharts绘制图形。我需要绘制一个多系列柱状图,我尝试了以下代码,但无效
<div id="chartContainer"></div>
<script type="text/javascript">
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
myChart.setXMLUrl("Data8.xml");
myChart.render("chartContainer");
</script>
Data8.xml
----------
<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' ><categories>
<category label='Product A' />
<category label='Product B' />
<category label='Product C' />
<category label='Product D' />
<category label='Product E' />
<category label='Product F' />
</categories><dataset seriesName='Current Year'>
<set value='567500' />
<set value='815300' />
<set value='556800' />
<set value='734500' />
<set value='676800' />
<set value='648500' />
</dataset><dataset seriesName='Previous Year'>
<set value='547300' />
<set value='584500' />
<set value='754000' />
<set value='456300' />
<set value='754500' />
<set value='437600' />
</dataset></chart>
尝试修改:
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");
:
var myChart = new FusionCharts("MSColumn3D", "myChartId", "400", "300");
Column3D
表示单系列,MSColumn3D
表示多系列。
请参考以下链接查看多系列图表https://www.fusioncharts.com/dev/chart-guide/standard-charts/multi-series-charts
请检查数据来源,MS图表数据已更改
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Comparison of Quarterly Revenue",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"plotFillAlpha": "80",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Previous Year",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}]
}, {
"seriesname": "Current Year",
"data": [{
"value": "25400"
}, {
"value": "29800"
}, {
"value": "21800"
}, {
"value": "26800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "12250",
"color": "#5D62B5",
"displayvalue": "Previous{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Previous year quarterly target : $13.5K"
}, {
"startvalue": "25950",
"color": "#29C3BE",
"displayvalue": "Current{br}Average",
"valueOnRight": "1",
"thickness": "1",
"showBelow": "1",
"tooltext": "Current year quarterly target : $23K"
}]
}]
}
演示链接相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 在WebGL中绘制多个二维图像
- JSXGraph:如何绘制带有箭头和无点标记的矢量
- 用图像而不是颜色填充对象(将图像绘制到画布上)
- 如何在FusionCharts中绘制多列柱状图