AmChart股票图表没有显示不同的图表

Question

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

＆＃13;

＆＃13;

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');
      }
  });
});

＆＃13;

＆＃13;

＆＃13;

我有两个数据集和两个面板。两个面板都显示相同的数据集（具有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）使第二个面板上的图形使用＆＃34; value2＆＃34;字段代替＆＃34;值＆＃34;。

以下是完整的代码：

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"
  }
});