如何在点击按钮上动态创建图表

时间:2018-09-21 17:58:23

标签: jquery highcharts

我有highchart和按钮,每当单击按钮时,应在动态图表的其他图表下方生成/创建另一个图表,这意味着我们需要创建动态div onclick并将这些div id动态附加到highchart,我尝试但是我不确定如何将动态div ID附加到highchart,这是下面的代码,请先感谢

Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'US and USSR nuclear stockpiles'
  },

  xAxis: {
    allowDecimals: false,
    labels: {
      formatter: function() {
        return this.value; // clean, unformatted number for year
      }
    }
  },
  yAxis: {
    title: {
      text: 'Nuclear weapon states'
    },
    labels: {
      formatter: function() {
        return this.value / 1000 + 'k';
      }
    }
  },
  tooltip: {
    pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
  },
  plotOptions: {
    area: {
      pointStart: 1940,
      marker: {
        enabled: false,
        symbol: 'circle',
        radius: 2,
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  },
  series: [{
    name: 'USSR/Russia',
    data: [null, null, null, null, null, null, null, null, null, null,
      5, 25, 50, 120, 150, 200, 426, 660, 869, 1060,
      1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
      11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
      30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
      37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
      21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
      12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
    ]
  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<div><button class="button1">submit1</button> <button class="button2">submit2</button> <button class="button3">submit3</button></div>
<div id="container" style="height: 400px; width: 500"></div>

2 个答案:

答案 0 :(得分:0)

您可以将ImgV.setVisibility(View.VISIBLE); 保存在变量中,并通过以下方式创建新图表:

id

实时演示:http://jsfiddle.net/BlackLabel/89etrLm2/

答案 1 :(得分:0)

$(function(){     $('#container')。highcharts({

    credits: {
        enabled: false
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }],

    exporting: {
        buttons: {
            myButton: {
                symbol: 'circle',
                symbolStrokeWidth: 1,
                symbolFill: '#bada55',
                symbolStroke: '#330033',


                onclick: function() {
                    // Something happens here
                    console.log('clicked!');
                    alert("Dhiren");
                },

                theme: {
                    states: {
                        hover: {
                            fill: '#FF0000'
                        },
                        select: {
                            fill: '#0000FF'
                        }
                    }    
                },
            }
        }
    }

});

});