HTML5/JS线性仪表

Question

HTML5/JS线性仪表

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

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>

Run Code Online (Sandbox Code Playgroud)

这是结果:

在此输入图像描述

谢谢你发布你的答案!请务必仔细阅读[自我推广常见问题解答](http://stackoverflow.com/faq#promotion).另请注意,每次链接到您自己的网站/产品时,您都要*免费发布免责声明. (2认同)

归档时间：	13 年，5 月前
查看次数：	11657 次
最近记录：	6 年，5 月前