[莫里斯图表-> html，将变量传递给php

Question

下面的代码会生成莫里斯图表，其中包含每周或每月的数据。很好，但是，我需要传递下拉菜单“ cars”中的变量并在php中创建一个var来运行sql select。任何人都可以帮助我在php中生成此var吗？非常感谢！！！熟

    <div id="line-chart" style="height: 300px;"><h3 style="text-align: center;">Waiting for you to choose the data you want to display</h3></div>
<hr/>
<button data-type="day">Day</button> | <button data-type="week">Week</button> | <button data-type="month">Month</button>
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

</body>
     </html>

<script>
    jQuery(function($) {
    $('button').on('click', function(e) {
        $('#line-chart').empty();
        var type = $(this).data('type')

        , month = [
                { y: '2012-06', a: 100, b: 90 },
                { y: '2012-07', a: 75,  b: 65 },
                { y: '2012-08', a: 50,  b: 40 },
                { y: '2012-09', a: 75,  b: 65 },
                { y: '2012-10', a: 50,  b: 40 },
                { y: '2012-11', a: 75,  b: 65 },
                { y: '2012-12', a: 100, b: 90 }
            ]

        , week = [
                { y: '2012 W1', a: 10, b: 20 },
                { y: '2012 W2', a: 50,  b: 10 },
                { y: '2012 W3', a: 40,  b: 80 },
                { y: '2012 W4', a: 90,  b: 25 },
                { y: '2012 W5', a: 10,  b: 20 },
                { y: '2012 W6', a: 35,  b: 60 },
                { y: '2012 W7', a: 8, b: 40 }
            ]

        , day = [
                { y: '2012-12-25', a: 20, b: 50 },
                { y: '2012-12-26', a: 30,  b: 30 },
                { y: '2012-12-27', a: 100, b: 10 },
                { y: '2012-12-28', a: 10,  b: 15 },
                { y: '2012-12-29', a: 80,  b: 60 },
                { y: '2012-12-30', a: 20,  b: 65 },
                { y: '2012-12-31', a: 5, b: 95 }
            ]
        , data = {
            month: month,
            week: week,
            day: day
            }

        , line = new Morris.Line({
            element: 'line-chart',
            resize: true,
            data: data[type],
            xkey: 'y',
            ykeys: ['a', 'b'],
            labels: ['Price', 'Test'],
            lineColors: ['#3c8dbc', '#3c8dbc'],
            hideHover: 'auto'
        })
        ;
    });
   });
    </script>

Answer 1

您需要在select元素上使用onChange事件，然后在内部，可以在用PHP编写的服务器端调用API。然后，从服务器返回的数据可用于通过函数setData（）更新图表。