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

时间:2015-08-11 11:14:46

标签: javascript php jquery amcharts

我正在尝试使用amcharts创建股票价格,收入,访问的股票图表,但是在创建收入线时卡住了,这就是图表

enter image description here

我想要上图的黄线,如下图中的蓝线

enter image description here

上图的代码是

        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 个答案:

没有答案