如何使用 amchart 添加多条曲线取决于您的独特数据
Posted
技术标签:
【中文标题】如何使用 amchart 添加多条曲线取决于您的独特数据【英文标题】：How to add multiple curves using amchart depends on your unique data 【发布时间】：2020-01-08 07:23:24 【问题描述】：我在 mysql 中的数据看起来像这样。
ID | Project_id | current_usage |
1 1 10
2 1 20
3 1 30
4 1 40
5 2 20
6 2 40
7 3 10
8 3 20
如何使用 amchart 在折线图上制作动态曲线，这取决于 project_id 的唯一性。
我已经有了代码，但它只适用于一条曲线，我怎么知道从中创建一条单独的曲线，这将取决于 project_id。这是我现有的代码。
var chart = AmCharts.makeChart("chartdiv",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"dataLoader":
"url": base_url + "chart/get_all_data",
"format": "json"
,
"categoryField": "date_created",
"rotate": false, //Para sa sorting
"categoryAxis":
"gridPosition": "start",
"axisColor": "#DADADA"
,
"valueAxes": [
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
],
"graphs": [
"id": "g1",
"lineColor": "#29B4B6",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "kWh",
"useLineColorForBulletBorder": true,
"valueField": "current_usage",
"balloonText": "[[title]] in [[date_created]]:<b>[[current_usage]]</b>"
],
"chartScrollbar":
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
,
"chartCursor":
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
,
"valueScrollbar":
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
,
"categoryAxis":
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
,
"export":
"enabled": true
,
);
感谢您的帮助。 :( 我在使用 amchart 方面还是新手。 这是我现有的代码
https://jsfiddle.net/rmallari/45hzatc3/9/
【问题讨论】：
如果你在这里开始小提琴会更好。 jsfiddle.net 带有虚拟数据 你好 mohammed sorry ，感谢您的建议，这是现有代码。 jsfiddle.net/rmallari/45hzatc3/9 【参考方案1】：应该遵循以下几点。
应将数据作为对象数组提供，其中 x 轴值为必填项。 在图形区域中添加不同的线对象。 每个对象在 X 轴值的基础上应该是唯一的（例如：project1 和 project2 在同一天不应有不同的值）。 date_created 应该是 ASC 格式。运行带有 2 个项目行的脚本
<script type="text/javascript">
var chart = AmCharts.makeChart("chartdiv",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"dataProvider": [
"project_1": "20",
"project_2": "10",
"date_created": "2019-09-05 04:50:35"
,
"project_1": "0",
"date_created": "2019-09-06 04:50:35"
,
"project_1": "20",
"project_2": "50",
"date_created": "2019-09-07 04:50:35"
,
"project_1": "140",
"project_2": "7",
"date_created": "2019-09-08 04:55:35"
,
"project_1": "14",
"project_2": "70",
"date_created": "2019-09-09 04:50:35"
,
"project_1": "50",
"project_2": "0",
"date_created": "2019-09-10 04:56:35"
,
"project_1": "60",
"project_2": "0",
"date_created": "2019-09-18 04:50:35"
,
],
"categoryField": "date_created",
"rotate": false, //Para sa sorting
"categoryAxis":
"gridPosition": "start",
"axisColor": "#DADADA"
,
"valueAxes": [
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
],
"graphs": [
"id": "g1",
"lineColor": "#29B4B6",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "kWh",
"useLineColorForBulletBorder": true,
"valueField": "project_1",
"balloonText": "[[title]] in [[valueField]]:<b>[[project_1]]</b>"
,
"id": "g2",
"lineColor": "red",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "kWh",
"useLineColorForBulletBorder": true,
"valueField": "project_2",
"balloonText": "[[title]] in [[valueField]]:<b>[[project_2]]</b>"
],
"chartScrollbar":
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
,
"chartCursor":
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
,
"valueScrollbar":
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
,
"categoryAxis":
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
,
"export":
"enabled": true
,
);
</script>
Fiddle Here
有用的Link在这里。
【讨论】：
嗨，我已经尝试过你的解决方案，但是如果我的数据将从数据库中获取是动态的，那么“project_id”将是动态的，如果有 5 个唯一的 project_id 应该有5条曲线。有没有解决方案我将如何在 amchart 上实现它。 @Mohammed Shafeek 如果项目数是动态的，您需要通过数组转换或循环开发输入和前端脚本。 在此处添加架构。它将帮助您获得优化的查询。 嗨@Mohammed Shafeek，这是我的查询，SELECT current_usage,project_id FROM electricity_usage 在关于如何使用我的查询实现对 amchart 的循环时，我仍然遇到问题
这里您没有提到任何关于查询中日期字段的内容。请在您的问题本身中更新用于预期图形的表架构。而不是在 cmets 中......以上是关于如何使用 amchart 添加多条曲线取决于您的独特数据的主要内容，如果未能解决你的问题，请参考以下文章