doudi2833 2015-08-11 11:14
浏览 60

绘制多值轴线图时出现问题

I am trying to create stock chart of stockprice, revenue, visits using amcharts, but m stuck while creating revenue line on it, this is the graph m getting

enter image description here

i want yellow line of above graph like the blue line of below graph

enter image description here

The code of above graph is

        var sp = JSON.parse('<?php echo $graphDetails; ?>');

        // for(var stkpr in sp){
        //  sp[stkpr].date = new Date(sp[stkpr].date);
        // }


        console.log(sp);

       var chart;

       AmCharts.ready(function () {

           // SERIAL CHART
           chart = new AmCharts.AmSerialChart();

           chart.dataProvider = sp;
           chart.categoryField = "date";

           // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
           chart.addListener("dataUpdated", zoomChart);

           // 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.minorGridEnabled = true;
           categoryAxis.axisColor = "#DADADA";
           categoryAxis.twoLineMode = true;
           categoryAxis.dateFormats = [{
                period: 'fff',
                format: 'JJ:NN:SS'
            }, {
                period: 'ss',
                format: 'JJ:NN:SS'
            }, {
                period: 'mm',
                format: 'JJ:NN'
            }, {
                period: 'hh',
                format: 'JJ:NN'
            }, {
                period: 'DD',
                format: 'DD'
            }, {
                period: 'WW',
                format: 'DD'
            }, {
                period: 'MM',
                format: 'MMM'
            }, {
                period: 'YYYY',
                format: 'YYYY'
            }];

           // first value axis (on the left)
           var valueAxis1 = new AmCharts.ValueAxis();
           valueAxis1.axisColor = "#FF6600";
           valueAxis1.axisThickness = 2;
           valueAxis1.gridAlpha = 0;
           chart.addValueAxis(valueAxis1);

           // second value axis (on the right)
           var valueAxis2 = new AmCharts.ValueAxis();
           valueAxis2.position = "right"; // this line makes the axis to appear on the right
           valueAxis2.axisColor = "#FCD202";
           valueAxis2.gridAlpha = 0;
           valueAxis2.axisThickness = 2;
//            categoryAxis.autoGridCount  = false;
            // categoryAxis.gridCount = chartData.length;
            // categoryAxis.gridPosition = "start";
           chart.addValueAxis(valueAxis2);

           // third value axis (on the left, detached)
           valueAxis3 = new AmCharts.ValueAxis();
           valueAxis3.offset = 50; // this line makes the axis to appear detached from plot area
           valueAxis3.gridAlpha = 0;
           valueAxis3.axisColor = "#B0DE09";
           valueAxis3.axisThickness = 2;
           chart.addValueAxis(valueAxis3);

           // GRAPHS
           // first graph
           var graph1 = new AmCharts.AmGraph();
           graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
           graph1.title = "Stock Price";
           graph1.valueField = "stockPrice";
           graph1.bullet = "round";
           graph1.hideBulletsCount = 30;
           graph1.bulletBorderThickness = 1;
           chart.addGraph(graph1);

           // second graph
           var graph2 = new AmCharts.AmGraph();
           graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
           graph2.title = "revenue";
           graph2.valueField = "revenue";
           graph2.bullet = "square";
           graph2.hideBulletsCount = 30;
           graph2.bulletBorderThickness = 1;
           chart.addGraph(graph2);

           // third graph
           var graph3 = new AmCharts.AmGraph();
           graph3.valueAxis = valueAxis3; // we have to indicate which value axis should be used
           graph3.valueField = "visits";
           graph3.title = "visits";
           graph3.bullet = "triangleUp";
           graph3.hideBulletsCount = 30;
           graph3.bulletBorderThickness = 1;
           chart.addGraph(graph3);

           // CURSOR
           var chartCursor = new AmCharts.ChartCursor();
           chartCursor.cursorAlpha = 0.1;
           chartCursor.fullWidth = true;
           chart.addChartCursor(chartCursor);

           // SCROLLBAR
           var chartScrollbar = new AmCharts.ChartScrollbar();
           chart.addChartScrollbar(chartScrollbar);

           // LEGEND
           var legend = new AmCharts.AmLegend();
           legend.marginLeft = 110;
           legend.useGraphSettings = true;
           chart.addLegend(legend);

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

       // this method is called when chart is first inited as we listen for "dataUpdated" event
       function zoomChart() {
           // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
           chart.zoomToIndexes(5, 245);
       }
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
    • ¥15 cmd cl 0x000007b
    • ¥20 BAPI_PR_CHANGE how to add account assignment information for service line
    • ¥500 火焰左右视图、视差(基于双目相机)
    • ¥100 set_link_state
    • ¥15 虚幻5 UE美术毛发渲染
    • ¥15 CVRP 图论 物流运输优化
    • ¥15 Tableau online 嵌入ppt失败
    • ¥100 支付宝网页转账系统不识别账号
    • ¥15 基于单片机的靶位控制系统