javascript - AmChart 股票图表未显示不同的图表

Question

我试图在 AmChart 股票图表中显示两个图表，但两个图表中显示的数据相同。我的 Javascript 代码如下所示:

var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",  // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
    pathToImages: "http://www.amcharts.com/images/",
    dataDateFormat: "YYYY-MM-DD",
    dataSets: [{
        color: "#b0de09", // bar chart color

        // userRegistrations variable is source of user data
        dataProvider: userRegistrations,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date"
    },
    {
        color: "#efefef", // bar chart color

        // likes variable is source of data for likes
        dataProvider: likes,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date",
    }],

    panels: [{

        legend: {},

        stockGraphs: [{
            id: "graph1",
            valueField: "value",
            type: "column",
            title: "User Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Users registered: <b>[[val]]</b>",

        }]
    },
    {

        legend: {},

        stockGraphs: [{
            id: "graph2",
            valueField: "value",
            type: "column",
            title: "Watch List Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Added to Watch List: <b>[[val]]</b>",

        }]
    }],

    panelsSettings: {
        startDuration: 1
    },

    categoryAxesSettings: {
        dashLength: 5
    },

    valueAxesSettings: {
        dashLength: 5
    },

    chartScrollbarSettings: {
        graph: "graph1",
        graphType: "line",
        position: "top"
    },

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

    },

    // range selector 
    periodSelector: {
        position: "top",
        periods: [{
            period: "DD",
            count: 1,
            label: "1 day"
        }, {
            period: "DD",
            selected: true,
            count: 7,
            label: "7 days"
        }, {
            period: "MM",
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    },

  // ballon on mouse hover
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    // "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});

// date picker
chart.addListener('rendered', function (event) {
    var dataProvider = chart.dataSets[0].dataProvider;
      $(".amChartsPeriodSelector .amChartsInputField").datepicker({
      dateFormat: "dd-mm-yy",
      minDate: dataProvider[0].date,
      maxDate: dataProvider[dataProvider.length-1].date,
      onClose: function() {
          $(".amChartsPeriodSelector .amChartsInputField").trigger('blur');
      }
  });
});

我有两个数据集和两个面板。两个面板都显示相同的数据集(带有 userRegistrations dataProvider 的数据集)。我想显示单独的数据集。

我已经浏览了 AmCharts 文档，但无法弄清楚如何执行此操作。

Answer 1

如果我理解正确，您希望第一个面板显示从第一个数据集生成的图表，第二个面板显示第二个数据集生成的图表。

要实现这一目标，您需要做几件事:

1) 通过将第二个数据集设置为 compared 来进行比较参数设置为 true 并将值字段映射到与第一个数据集不同的名称:

{
    color: "#efefef", // bar chart color

    // likes variable is source of data for likes
    dataProvider: likes,

    fieldMappings: [{
        fromField: "val",
        toField: "value2"
    }],
    categoryField: "date",
    compared: true
}

2) 使第二个面板上的图表使用“value2”字段而不是“value”。

完整代码如下:

var chart = AmCharts.makeChart("chartdiv", {
    type: "stock",  // Possible types are: serial, pie, xy, radar, funnel, gauge, map, stock
    pathToImages: "http://www.amcharts.com/images/",
    dataDateFormat: "YYYY-MM-DD",
    dataSets: [{
        color: "#b0de09", // bar chart color

        // userRegistrations variable is source of user data
        dataProvider: userRegistrations,

        fieldMappings: [{
            fromField: "val",
            toField: "value"
        }],
        categoryField: "date"
    },
    {
        color: "#efefef", // bar chart color

        // likes variable is source of data for likes
        dataProvider: likes,

        fieldMappings: [{
            fromField: "val",
            toField: "value2"
        }],
        categoryField: "date",
        compared: true
    }],

    panels: [{

        legend: {},

        stockGraphs: [{
            id: "graph1",
            valueField: "value",
            type: "column",
            title: "User Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value",
            balloonText: "Users registered: <b>[[val]]</b>",

        }]
    },
    {

        legend: {},

        stockGraphs: [{
            id: "graph2",
            valueField: "value2",
            type: "column",
            title: "Watch List Graph",
            fillAlphas: 1,
            comparable: true,
            compareField: "value2",
            balloonText: "Added to Watch List: <b>[[val]]</b>",

        }]
    }],

    panelsSettings: {
        startDuration: 1
    },

    categoryAxesSettings: {
        dashLength: 5
    },

    valueAxesSettings: {
        dashLength: 5
    },

    chartScrollbarSettings: {
        graph: "graph1",
        graphType: "line",
        position: "top"
    },

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

    },

    // range selector 
    periodSelector: {
        position: "top",
        periods: [{
            period: "DD",
            count: 1,
            label: "1 day"
        }, {
            period: "DD",
            selected: true,
            count: 7,
            label: "7 days"
        }, {
            period: "MM",
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    },

  // ballon on mouse hover
  "balloon": {
    "adjustBorderColor": true,
    "color": "#000000",
    // "cornerRadius": 5,
    "fillColor": "#FFFFFF"
  }
});