使用 amcharts 设置图表主题。 [不是 JSON 数据]

Question

我开发了一个移动应用程序，它使用 amcharts 显示折线图。我以此链接为例，请访问 http://jsfiddle.net/ATQUm/825/ 并开发了我的应用程序。现在我一直坚持设置主题。它包含不同的主题，如“黑暗”，“光明”，“粉笔”等。每个主题都有自己的JS。作为示例，我附上了 dark.js 的链接。

var chart;
var chartData = [];
var chartCursor;
var day = 0;
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);

// generate some random data, quite different range
function generateChartData() {
    for (day = 0; day < 50; day++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + day);

        var visits = Math.round(Math.random() * 40) - 20;

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
}

// create chart
AmCharts.ready(function() {
    // generate some data first
    generateChartData();
    // SERIAL CHART    
    chart = new AmCharts.AmSerialChart();
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.marginTop = 0;
    chart.marginRight = 10;
    chart.autoMarginOffset = 5;
    chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
    };
    chart.dataProvider = chartData;
    chart.categoryField = "date";

    // AXES
    // category
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 1;
    categoryAxis.gridAlpha = 0.15;
    categoryAxis.axisColor = "#DADADA";

    // value                
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.axisAlpha = 0.2;
    valueAxis.dashLength = 1;
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.title = "red line";
    graph.valueField = "visits";
    graph.bullet = "round";
    graph.bulletBorderColor = "#FFFFFF";
    graph.bulletBorderThickness = 2;
    graph.lineThickness = 2;
    graph.lineColor = "#b5030d";
    graph.negativeLineColor = "#0352b5";
    graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
    chart.addGraph(graph);

    // CURSOR
    chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);

    // SCROLLBAR
    var chartScrollbar = new AmCharts.ChartScrollbar();
    chartScrollbar.graph = graph;
    chartScrollbar.scrollbarHeight = 40;
    chartScrollbar.color = "#FFFFFF";
    chartScrollbar.autoGridCount = true;
    chart.addChartScrollbar(chartScrollbar);

    // WRITE
    chart.write("chartdiv");

    // set up the chart to update every second
    setInterval(function () {
        // normally you would load new datapoints here,
        // but we will just generate some random values
        // and remove the value from the beginning so that
        // we get nice sliding graph feeling

        // remove datapoint from the beginning
        chart.dataProvider.shift();

        // add new one at the end
        day++;
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + day);
        var visits = Math.round(Math.random() * 40) - 20;
        chart.dataProvider.push({
            date: newDate,
            visits: visits
        });
        chart.validateData();
    }, 1000);
});

访问“http://extra.amcharts.com/tutorials/themes/amcharts/themes/dark.js”我尝试参考这次访问来设置其主题“http://www.amcharts.com/教程/使用主题/“但是我\我没有得到预期的结果。我犯了什么错误？请建议我解决方案，以便我纠正我的错误。

Answer 1

问题：

1) 您使用的是 amcharts v2，它不支持主题； 2）主题文件路径错误 3）你没有在任何地方设置主题。

固定小提琴：http://jsfiddle.net/ATQUm/830/

要包含的脚本：

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/themes/dark.js"></script>

主题线：

AmCharts.theme = AmCharts.themes.dark;

Answer 2

对于较新的 amCharts 5，您可以轻松创建自定义主题。以下示例展示了如何设置自定义颜色：

    // Create an amChart root, where `chartdiv` is a reactive component in our case.
    let root = am5.Root.new(chartdiv);

    // Create our own custom theme.
    class CustomTheme extends am5.Theme {
        setupDefaultRules() {
            super.setupDefaultRules();
            this.rule("ColorSet").setAll({
                colors: [
                    am5.Color.fromString("#006d95"),
                    am5.Color.fromString("#323738"),
                    am5.Color.fromString("#009f9a"),
                    am5.Color.fromString("#ff617c"),
                    am5.Color.fromString("#FFD700"),
                    am5.Color.fromString("#007fad"),
                    am5.Color.fromString("#ff5159"),
                    am5.Color.fromString("#008780"),
                ],
                reuse: true
            });
        }
    }
    // Use the theme
    root.setThemes([
        CustomTheme.new(root)
    ]);