2つ以上のグラフをamchart株価チャートに追加できません

Question

別のパネルで設定した異なるデータのデータを表示する株価チャートに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" 
     }] 
    } 
}); 

はdemoへのリンクです。 2つのグラフのみを表示し、3つ目のグラフは表示しません。

Answer 1

デフォルトで表示させたい場合は、最初のデータセットの後のすべてのデータセットでcomparedをtrueに設定する必要があります。あなたはそれを第3のものにセットしますが、第2のものにはセットしません。

{ 
    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 

Updated codepen