Привязать график при щелчке к данным vue. js - PullRequest
Новая
       2

Привязать график при щелчке к данным vue. js

0 голосов
/ 07 мая 2020

Я создаю проект с графической библиотекой vue. js и plot.ly javascript. Как я могу связать « pts » с данными vue « TestSentences »? Вот мой код, спасибо всем, кто внес свой вклад. Моя цель - создать интерактивную панель управления с использованием этой переменной. Таким образом, я могу изменить данные, щелкнув в любом месте диаграммы. 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<div id="app">
    <div id="grafik"></div>
</div>

<!-- Vue-->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            TestSentences: "",
        },
        methods: {
            grafikCiz() {
                var trace1 = {
                    x: [1, 2, 3],
                    y: ["book", "pencil", "bag"],
                    mode: 'markers',
                    marker: {
                        color: ['#6886c5', '#f40552', '#1b1b2f'],
                        size: [10, 20, 30]
                    }
                };

                var data = [trace1];
                var layout = {
                    height: 400,
                    width: 400,
                };

                Plotly.newPlot('grafik', data, layout);
            },
        },
        mounted: function () {
            this.grafikCiz();
        },
    });
</script>
<!-- Vue -->

<script>
    var my_graph = document.getElementById('grafik');
    my_graph.on('plotly_click', function (data) {

        for (var i = 0; i < data.points.length; i++) {
            pts = 'x = ' + data.points[i].x + '\ny = ' + data.points[i].y + '\n\n';
        };

        alert('Closest point clicked:\n\n' + pts);

    });
</script>
...