javascript — проблема при рисовании линейной диаграммы осей с несколькими значениями

Я пытаюсь создать биржевую таблицу с указанием цены, дохода, посещений, используя amcharts, но я застрял при создании линии дохода на нем, это график м, получая

введите описание изображения здесь

я хочу желтую линию выше графика, как синяя линия ниже графика

введите описание изображения здесь

Код приведенного выше графика

        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

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]