Question

我正在渲染Amcharts折线图，我已经添加了带有值轴的动态图形，用户应该能够在飞行中操纵每个图形的值轴。防爆。如果我添加2个带有2个值轴的图形，则用户应该能够将图形的值轴组合并在运行时显示为单个。

我创建了几乎所有内容，但是在将值轴分配给多个图形时，它会给出错误＆＃39;无法准备属性值undefined＆＃39;

我有这段代码，

    $(function(){

   var t = $('#example').DataTable({
     info:false,
     paging:false,
     searching:false,
   });
    var counter = 1;

    $('#addRow').on( 'click', function () {
        t.row.add( [
            counter +'.1',
        ] ).draw( false );
        $('#yaxisselect').append(new Option(counter+ '.1',counter+ '.1',false,false));
        counter++;
    });
    $('#save').click(function(){
      if($('#yaxisselect').val() != null && $('#yaxisselect').val() != ""){
        for(i in chart.graphs){
          if(chart.graphs[i].id == $('#yaxisselect').val()){
            chart.graphs[i].title = $("#CrrGraphTitle").val();
          }
        }
      }
      chart.validateNow();
    });
     $('#yaxisselect').on('change',function(){
        var graphExist = false;
        for(i in chart.graphs){
          if(chart.graphs[i].id == $('#yaxisselect').val()){
            graphExist = true;
            $("#CrrGraphTitle").val(chart.graphs[i].title);
            $("#CurrValueAxisTitle").val(chart.graphs[i].valueAxis.title);
            $("#ValueAxisSelect").val(chart.graphs[i].valueAxis.id).trigger('change');
          }
        }
        if(!graphExist){
           var offsets = {
              left: 0,
              right: 0
            }
            let offset = 0;
            let position = Math.random() * 10 > 5 ? "left" : "right";

            for (var i1 = 0; i1 < chart.valueAxes.length; i1++) {
              offsets[chart.valueAxes[i1].position] += 75;
            }
          // Add value axis
          var a = new AmCharts.ValueAxis();
          a.id = $("#yaxisselect").val();
          a.axisThickness = 2;
          a.gridAlpha = 0;
          a.axisAlpha = 1;
          a.minimum = undefined
          a.maximum = undefined
          a.position = position;
          a.offset = offsets[position];
          chart.addValueAxis(a);

          var graph = new AmCharts.AmGraph();
            graph.title = "test" + chart.graphs.length;
            graph.valueField = $("#yaxisselect").val();
            graph.id = $("#yaxisselect").val();
            graph.balloonText = "[[title]]: [[value]]";
            graph.type = "line";
            graph.valueAxis =  $("#yaxisselect").val();
            for (i in chartData) {
            chartData[i][$("#yaxisselect").val()] = Math.round(Math.random() * 12) + 1;
          }
          chart.addGraph(graph);

            $("#CrrGraphTitle").val(graph.title);
            $('#ValueAxisSelect').append(new Option(graph.id,graph.id,true,true));
        }
     });

     $('#ValueAxisSelect').on('change',function(){

     })

     $('#yaxisselect').on('select2:close',function(){
        chart.validateNow();
     })

    $('#yaxisselect').on('select2:opening',function(){
          var graphExist = false;
          for(i in chart.graphs){
            if(chart.graphs[i].id == $('#yaxisselect').val()){
              graphExist = true;
              chart.graphs[i].title = $("#CrrGraphTitle").val();
              for(g in chart.valueAxes){
                  if(chart.valueAxes[g].id ==  $("#ValueAxisSelect").val()){
                      chart.graphs[i].valueAxis = chart.valueAxes[g] // If I comment out this, everything works fine but required is not satisfied.
                  }
              }

              console.log(chart)
            }
          }
      })


  $('#slider').slideReveal({
    trigger: $("#trigger,#save"),
    position:'right'
  });

  $('.iselect').select2({
     dropdownParent: $('#slider'),
     placeholder: "Select a state",
    allowClear: true
  });


})

var chartData = generatechartData();

function generatechartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 150);
    var visits = 500;

    for (var i = 0; i < 150; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
    return chartData;
}


var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "marginRight": 80,
    "autoMarginOffset": 20,
    "marginTop":20,
    "dataProvider": chartData,
     "legend": {
    "useGraphSettings": true
    },
    "valueAxes": [{
        "id": "v1",
        "axisAlpha": 0.1
    }],
    "graphs": [{
        "useNegativeColorIfDown": true,
        "balloonText": "[[category]]<br><b>value: [[value]]</b>",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletBorderColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "lineColor": "#fdd400",
        "negativeLineColor": "#67b7dc",
        "valueField": "visits"
    }],
    "chartScrollbar": {
        "scrollbarHeight": 5,
        "backgroundAlpha": 0.1,
        "backgroundColor": "#868686",
        "selectedBackgroundColor": "#67b7dc",
        "selectedBackgroundAlpha": 1
    },
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true
    },
    "categoryField": "date",
    "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "minHorizontalGap": 60
    },
    "export": {
        "enabled": true
    }
});

chart.addListener("dataUpdated", zoomChart);
//zoomChart();

function zoomChart() {
    if (chart.zoomToIndexes) {
        chart.zoomToIndexes(130, chartData.length - 1);
    }
}

https://jsfiddle.net/14076Ly0/

步骤，

单击“添加行”2-3次以生成数据单击触发器以打开设置选择y轴以在飞行中添加图形和值轴添加2-3个图表并更改默认值轴更改y轴以保存配置 - ＆gt;这给出了错误，图表没有绘制..

知道我在这里做错了什么？

Answer 1

操作值轴时应使用validateNow(true, false)或select2:close，因为它的外观取决于数据中的值。更新#yaxisselect的{{1}}事件将解决此问题。

更新了小提琴：https://jsfiddle.net/14076Ly0/1/

Amcharts - 分配共同价值轴

1 个答案: