javascript - AmCharts stocklegend 的精确度

Question

我需要更改“stockLegend”属性中值的精度，因为它显示的值高于其他值。

"stockLegend": {
   "periodValueTextRegular": "[[value.average]]",
   "spacing": 10
}

Answer 1

可以通过在单独的panel处设置精度来控制值精度。水平或在 panelsSettings如果您希望为所有面板设置它。

AmCharts.makeChart("chartdiv", {
  // ...
  panelsSettings: {
    precision: 2, //global setting
    // ...
  },
  // ...
  panels: [{
    // ...
    precision: 1, //individual setting
    // ...
  },
  // ...
  ],
   // ...
});

下面的演示设置在顶部面板:

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

generateChartData();

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "stock",
  "theme": "light",  

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

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

  "panels": [ { 
    "precision": 2,
    "recalculateToPercents": false,
      "showCategoryAxis": false,
      "title": "Value",
      "percentHeight": 70,

      "stockGraphs": [ {
        "id": "g1",
        "valueField": "value",
        "comparable": true,
        "compareField": "value",
        "balloonText": "[[title]]:<b>[[value]]</b>",
        "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>"
      } ],

      "stockLegend": {
        "periodValueTextComparing": "[[percents.value.close]]%",
        "periodValueTextRegular": "[[value.close]]"
      }
    },

    {
      "title": "Volume",
      "percentHeight": 30,
      "stockGraphs": [ {
        "valueField": "volume",
        "type": "column",
        "showBalloon": false,
        "fillAlphas": 1
      } ],


      "stockLegend": {
        "periodValueTextRegular": "[[value.close]]"
      }
    }
  ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "fullWidth": true,
    "cursorAlpha": 0.1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  }  
  
} );

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.random() * 2;
    var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;

    var a2 = Math.random() * 10;
    var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;

    chartData1.push( {
      "date": newDate,
      "value": a1,
      "volume": b1
    } );
    chartData2.push( {
      "date": newDate,
      "value": a2,
      "volume": b2
    } );
  }
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#chartdiv {
  width: 100%;
  height: 100%;
}

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>