Javascript：滑动到图表中_Javascript_Css_Charts

Javascript：滑动到图表中

javascript css charts

Javascript：滑动到图表中,javascript,css,charts,Javascript,Css,Charts,我有这个：[https://jsfiddle.net/charttester/tqouvhyw/8/]` 问题：我需要将滑块移动到x轴。（整个图形宽度的值为0）。当我在轴上移动滑块时，会同时显示一个值（在滑块上方和下方）我是javascript的初学者。请给我一些解决方案好吗现在我在这里，但在网页上是问题的反应…一些建议 <!DOCTYPE html> <html> <head> <meta http-equiv="content

我有这个：[https://jsfiddle.net/charttester/tqouvhyw/8/]`

问题：我需要将滑块移动到x轴。（整个图形宽度的值为0）。当我在轴上移动滑块时，会同时显示一个值（在滑块上方和下方）

我是javascript的初学者。请给我一些解决方案好吗

现在我在这里，但在网页上是问题的反应…一些建议

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style id="compiled-css" type="text/css">
        .slider {
            -webkit-appearance: none;
            width: 515px;
            height: 15px;
            position: absolute;
            top: 280px;
            left: 150px;
            border-radius: 5px;
            background: none;
            outline: none;

            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #000000;
            cursor: col-resize;
        }

        .slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

    </style>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
<div class="slidecontainer">
    <input type="range" min="1" max="100" value="0" class="slider" id="myRange">
</div>

<script type="text/javascript">//<![CDATA[


google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        [' ', 'Sales', 'Expenses'],
        [' ', 0, 0],
        [' ', 2000, -1000],
        [' ', 7000, -4500],
        [' ', 10000, -7000],
        [' ', 15000, -11000],
        [' ', 25000, -17000]
    ]);

    var options = {
        title: '',
        hAxis: {
            textPosition: 'none' ,

        },
        vAxis: {
            textPosition: 'none' ,
            baselineColor: 'none',
            ticks: []
        },

        series:{
            0: { color: '#28D690' },
            1: { color: '#FF0000' },
        }
    };
    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>
<script>
    if (window.parent && window.parent.parent){
        window.parent.parent.postMessage(["resultsFrame", {
            height: document.body.getBoundingClientRect().height,
            slug: "tqouvhyw"
        }], "*")
    }
    window.name = "result"
</script>
</body>
</html>


.滑块{
-webkit外观：无；
宽度：515px；
高度：15px；
位置：绝对位置；
顶部：280px；
左：150px；
边界半径：5px；
背景：无；
大纲：无；
-webkit转换：.2s；
转变：不透明度；
}
.滑块：：-webkit滑块拇指{
-webkit外观：无；
外观：无；
宽度：25px；
高度：25px；
边界半径：50%；
背景：#000000；
光标：col resize；
}
.滑块：：-moz范围拇指{
宽度：20px；
高度：20px；
边界半径：50%；
背景#4CAF50；
光标：指针；
}
//
if（window.parent&&window.parent.parent）{
window.parent.parent.postMessage（[“resultsFrame”{
高度：document.body.getBoundingClientRect（）.height，
鼻涕虫：“tqouvhyw”
}], "*")
}
window.name=“结果”