开发者问题收集

无法向 amchart 股票图表添加 2 个以上图表

2017-11-21
140

我试图向股票图表添加 3 个图表,在单独的面板中显示来自不同数据集的数据。

这是 JS 代码:

var chartData1 = [];
var chartData2 = [];
var chartData3 = [];

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 a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;
    var a3 = -1 * Math.round(Math.random() * (1000 + i)) + 2000 + i;

        chartData1.push({
            date: newDate,
            value: a1
        });
        chartData2.push({
            date: newDate,
            value: a2
        });
    chartData3.push({
            date: newDate,
            value: a3
        });
    }
}

AmCharts.makeChart("chartdiv", {
    type: "stock",

    dataSets: [{
            title: "first data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value"
            }],
            dataProvider: chartData1,
            categoryField: "date"
        },

             {
            title: "second data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value2"
            }],
            dataProvider: chartData2,
            categoryField: "date"
        },

        {
            title: "third data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value3"
            }],
            dataProvider: chartData3,
            categoryField: "date",
      compared: true
        }
    ],

    panels: [{

            showCategoryAxis: false,
            title: "Data set #1",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true,
        bullet: "round"
            }],

            stockLegend: {

            }
        },{

            showCategoryAxis: false,
            title: "Data set #2",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g2",
                valueField: "value2",
                comparable: true,
        bullet: "round"
            }],

            stockLegend: {

            }
        }, {

            showCategoryAxis: true,
            title: "Data set #3",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g3",
                valueField: "value3",
                compareField: "value3",
                comparable: true,
        bullet: "round",
                visibleInLegend: false
            }],

            stockLegend: {

            }
        }
    ],

    chartScrollbarSettings: {
        graph: "g1"
    },

    chartCursorSettings: {
        valueBalloonsEnabled: true,
        fullWidth:true,
        cursorAlpha:0.1
    },

    periodSelector: {
        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"
        }]
    }
});

这是 演示 的链接。它只显示两个图表,第三个没有渲染。

1个回答

如果您希望默认显示所有数据集,则需要在第一个数据集之后的所有数据集中将 compared 设置为 true。您只能在第三个数据集中设置它,而第二个数据集中无需设置。

{
  title: "second data set",
  fieldMappings: [
    {
      fromField: "value",
      toField: "value2"
    }
  ],
  dataProvider: chartData2,
  categoryField: "date",
  compared: true //needs to be enabled
},

{
  title: "third data set",
  fieldMappings: [
    {
      fromField: "value",
      toField: "value3"
    }
  ],
  dataProvider: chartData3,
  categoryField: "date",
  compared: true  //needs to be enabled

已更新 codepen

xorspark
2017-11-21