4

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

4

1 回答 1

6

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

结果如下：

在此处输入图像描述

于 2012-07-23T16:10:48.607 回答