javascript - 单轴静态（无滑块）图表（谷歌图表或其他）？

Question

我需要将一系列值显示为类似于下图的图表：

这个想法是有一个最小值和一个最大值。我试图显示的值可能介于两者之间。

我打算使用谷歌图表，他们的条形图（图像）几乎是我想要的，但在轴上它同时显示x和y，我似乎只想要x，或者也许y。（用已故马克朝圣者的话来说，“我没有很好地解释这一点。”）

谁能告诉我如何使用这个 Google 条形图（或另一个 Google 图表）或其他东西来做到这一点？

Answer 1

这是我想出的（这使用了来自 Google Charts API 的条形图图像 - 如上所述 - 但不使用图表中的标签）：

<script type="text/javascript">
    google.load("visualization", "1", {packages:["imagebarchart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

        //Here we display a range from 10 million (10000000)
        //to 20 million (20000000), using a dummy value set
        //to 1 less than the low point of our range (in this
        //case, 9999999) and with the same color as the
        //chart's background. The dummy value will be stacked
        //on top of the value we want to show and blank out
        //the chart from 0 to where our range begins.

        var data = google.visualization.arrayToDataTable([
            ['', ''],
            [9999999, 20000000]
        ]);

        var chart = new google.visualization.ImageBarChart(document.getElementById("chart_div"));
        chart.draw(data, {showValueLabels: false, backgroundColor: '#f5f5f5',  width: 1000, height: 70, min: 100000, max: 50000000, colors: ['#f5f5f5', '#008000']});
    }
</script>

（chart_div是页面加载时要被图表替换的 div；此代码基于图表文档中的示例。）

显然，这个特定的条形图并不打算以这种方式使用，但它是我能找到的最接近我想要的东西。我希望这可以帮助遇到同样问题的人。