1

I was trying to display the y axis values in the amcharts. Here is the jsfiddle link.

Here is the html code:

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript">
</script>
<div id="chartdiv" style="width: 80%; height: 362px;align:right;">
</div>​

Here is the javascript code

    var lineChartData = [{
    date: new Date(2009, 10, 2),
    value: 5},
{
    date: new Date(2009, 10, 3),
    value: 15},
{
    date: new Date(2009, 10, 4),
    value: 13},
{
    date: new Date(2009, 10, 5),
    value: 17},
{
    date: new Date(2009, 10, 6),
    value: 15},
{
    date: new Date(2009, 10, 9),
    value: 19},
{
    date: new Date(2009, 10, 10),
    value: 21},
{
    date: new Date(2009, 10, 11),
    value: 20},
{
    date: new Date(2009, 10, 12),
    value: 20},
{
    date: new Date(2009, 10, 13),
    value: 19},
{
    date: new Date(2009, 10, 16),
    value: 25},
{
    date: new Date(2009, 10, 17),
    value: 24},
{
    date: new Date(2009, 10, 18),
    value: 26},
{
    date: new Date(2009, 10, 19),
    value: 27},
{
    date: new Date(2009, 10, 20),
    value: 25},
{
    date: new Date(2009, 10, 23),
    value: 29},
{
    date: new Date(2009, 10, 24),
    value: 28},
{
    date: new Date(2009, 10, 25),
    value: 30},
{
    date: new Date(2009, 10, 26),
    value: 72,
    customBullet: "http://www.amcharts.com/lib/images/redstar.png" // note, one line has a custom bullet defined
    },
{
    date: new Date(2009, 10, 27),
    value: 43},
{
    date: new Date(2009, 10, 30),
    value: 31},
{
    date: new Date(2009, 11, 1),
    value: 30},
{
    date: new Date(2009, 11, 2),
    value: 29},
{
    date: new Date(2009, 11, 3),
    value: 27},
{
    date: new Date(2009, 11, 4),
    value: 26}];

AmCharts.ready(function() {
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = lineChartData;
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.categoryField = "date";

    // sometimes we need to set margins manually
    // autoMargins should be set to false in order chart to use custom margin values
    chart.autoMargins = false;
    chart.marginRight = 0;
    chart.marginLeft = 0;
    chart.marginBottom = 22;
    chart.marginTop = 0;

    // AXES
    // category                
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.gridAlpha = 0;
    categoryAxis.tickLength = 0;
    categoryAxis.axisAlpha = 0;
    categoryAxis.title = "ko";

    // value
    var valueAxis = new AmCharts.ValueAxis();
    valueAxis.dashLength = 4;
    valueAxis.axisAlpha = 0;
    valueAxis.title="Count";
    chart.addValueAxis(valueAxis);

    // GRAPH
    var graph = new AmCharts.AmGraph();
    graph.type = "line";
    graph.valueField = "value";
    graph.lineColor = "#D8E63C";
    graph.customBullet = "http://www.amcharts.com/lib/images/star.gif"; // bullet for all data points
    graph.bulletSize = 14; // bullet image should be a rectangle (width = height)
    graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
    chart.addGraph(graph);

    // CURSOR
    var chartCursor = new AmCharts.ChartCursor();
    chart.addChartCursor(chartCursor);

    // WRITE
    chart.write("chartdiv");
});​
4

1 回答 1

2

有两种选择：

1) 设置 valueAxis.inside = true;

2）删除这两行：

chart.autoMargins = false;
chart.marginRight = 0;
于 2012-11-21T08:42:07.773 回答