Question

我想使用html5或javascript显示类似fusion charts中的线性规格。在进行谷歌搜索时，我找不到任何类似于一个融合图表的开源/自由线性测量仪

Answer 1

您可以使用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>

结果如下：

enter image description here

Answer 2

我知道你说过免费/开源，但是如果你考虑付费的话，那么Wijmo Linear Gauge小工具就很棒了 http://wijmo.com/widgets/wijmo-complete/linear-gauge/

HTML5 / JS线性仪表

2 个答案: