如何在#metroJS中集成amcharts

howto integrate amcharts in #meteorJS

本文关键字：集成 amcharts #metroJS 更新时间：2023-09-26

我想在我的流星项目中使用amcharts，如何在流星项目中集成amcharts？我将mrt:amcharts包添加到我的项目中。已将amcharts免费版本文件夹复制到我的公用文件夹。但它并没有出现。我的代码如下。chart.html

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src="/amcharts/amcharts.js" type="text/javascript"></script>
    <script src="/amcharts/serial.js" type="text/javascript"></script>
    <script src="/amcharts/amstock.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/amcharts/style.css" type="text/css">
</head>
<template name="chart">
    <p>chart is here</p>
    <div id="chartdiv" style="width: 100%; height: 400px;"></div>
</template>

chart.js

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];
var chartData4 = [];
generateChartData();
function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);
    for (var i = 0; i < 500; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);
        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
        var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
        var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
        var a3 = Math.round(Math.random() * (100 + i)) + 200;
        var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;
        var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
        var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;
        chartData1.push({
            date: newDate,
            value: a1,
            volume: b1
        });
        chartData2.push({
            date: newDate,
            value: a2,
            volume: b2
        });
        chartData3.push({
            date: newDate,
            value: a3,
            volume: b3
        });
        chartData4.push({
            date: newDate,
            value: a4,
            volume: b4
        });
    }
}
var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",
    "theme": "none",
    pathToImages: "http://www.amcharts.com/lib/3/images/",
    dataSets: [{
            title: "first data set",
            fieldMappings: [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
            }],
            dataProvider: chartData1,
            categoryField: "date"
        },
        {
            title: "second data set",
            fieldMappings: [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
            }],
            dataProvider: chartData2,
            categoryField: "date"
        },
        {
            title: "third data set",
            fieldMappings: [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
            }],
            dataProvider: chartData3,
            categoryField: "date"
        },
        {
            title: "fourth data set",
            fieldMappings: [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
            }],
            dataProvider: chartData4,
            categoryField: "date"
        }
    ],
    panels: [{
            showCategoryAxis: false,
            title: "Value",
            percentHeight: 70,
            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true,
                compareField: "value",
                balloonText: "[[title]]:<b>[[value]]</b>",
                compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
            }],
            stockLegend: {
                periodValueTextComparing: "[[percents.value.close]]%",
                periodValueTextRegular: "[[value.close]]"
            }
        },
        {
            title: "Volume",
            percentHeight: 30,
            stockGraphs: [{
                valueField: "volume",
                type: "column",
                showBalloon: false,
                fillAlphas: 1
            }],
            stockLegend: {
                periodValueTextRegular: "[[value.close]]"
            }
        }
    ],
    chartScrollbarSettings: {
        graph: "g1"
    },
    chartCursorSettings: {
        valueBalloonsEnabled: true,
        fullWidth:true,
        cursorAlpha:0.1,
        valueLineBalloonEnabled:true,
        valueLineEnabled:true,
        valueLineAlpha:0.5
    },
    periodSelector: {
        position: "left",
        periods: [{
                period: "MM",
                selected: true,
                count: 1,
                label: "1 month"
            }, {
                period: "YYYY",
                count: 1,
                label: "1 year"
            }, {
                period: "YTD",
                label: "YTD"
            }, {
                period: "MAX",
                label: "MAX"
        }]
    },
    dataSetSelector: {
        position: "left"
    }
});

试试这个：mrt add amcharts

此外，在图表初始化中，如果引用任何图像（例如"export.png"），请在路径前加上包路径。例如

"exportConfig":{
  "menuTop":"20px",
      "menuRight":"20px",
      "menuItems": [{
      "icon": '/packages/amcharts/lib/images/export.png',
      "format": 'png'   
      }]  
  }