HTML5 / JS Linear Gauge

Я хотел бы отобразить линейный датчик, как на графике слияния с использованием html5 или javascript. Выполняя поиск в Google, я не смог найти какой-либо линейный датчик с открытым исходным кодом или бесплатный линейный датчик, похожий на тот, который есть у одной диаграммы слияния.

Источник

2 ответа

Решение

Вы можете достичь почти того же с http://amcharts.com/, вот код:

       <script type="text/javascript">
        var chart;

        var chartData = [{
            category: "",
            bad: 75,
            moderate: 15,
            good: 10
        }];

        AmCharts.ready(function () {
            // SERIALL CHART
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "category";
            chart.rotate = true;
            chart.columnWidth = 1;

            // AXES
            // Category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridAlpha = 0;
            categoryAxis.axisAlpha = 0;
            categoryAxis.gridPosition = "start";

            // value                      
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.stackType = "100%";
            valueAxis.gridAlpha = 0;
            valueAxis.autoGridCount = false;
            valueAxis.gridCount = 20;
            valueAxis.axisAlpha = 1;
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // firstgraph 
            var graph = new AmCharts.AmGraph();
            graph.labelText = "Bad";
            graph.valueField = "bad";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#d05c4f", "#ffb2a8"];
            chart.addGraph(graph);

            // second graph                              
            graph = new AmCharts.AmGraph();
            graph.labelText = "[[value]]";
            graph.valueField = "namerica";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.lineColor = "#D8E0BD";
            chart.addGraph(graph);

            // thirdt graph              
            graph = new AmCharts.AmGraph();
            graph.labelText = "Moderate";
            graph.valueField = "moderate";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#cba01e", "#fee3a0"];
            chart.addGraph(graph);

            // fourth graph 
            graph = new AmCharts.AmGraph();
            graph.labelText = "Good";
            graph.valueField = "good";
            graph.type = "column";
            graph.lineAlpha = 0;
            graph.fillAlphas = 1;
            graph.fillColors = ["#74960c","#d2e594"];
            chart.addGraph(graph);

            // WRITE
            chart.write("chartdiv");
        });

    </script>
</head>

<body>
    <div id="chartdiv" style="width: 500px; height: 100px;"></div>
</body>

И вот результат:

Источник

Я знаю, что вы сказали, что бесплатный / открытый исходный код, но если вы считаете платным, виджет Wijmo Linear Gauge великолепен http://wijmo.com/widgets/wijmo-complete/linear-gauge/

Источник
Другие вопросы по тегам