js三元图的画法

隐含

已于 2024-06-20 17:46:00 修改

阅读量122

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-06-20 17:37:41 首次发布

本文链接：https://blog.csdn.net/u010782109/article/details/139838963

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三元图</title>
   
</head>
<body>
    <div id="ternaryPlot" style="width: 600px; height: 600px;"></div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var data = [{
            type: 'scatterternary',
            mode: 'markers',
            a: [0.1, 0.2, 0.4, 0.6, 0.8],
            b: [0.6, 0.3, 0.4, 0.2, 0.1],
            c: [0.3, 0.5, 0.2, 0.2, 0.1],
            marker: {
                symbol: 100,
                color: '#DB7365',
                size: 14,
                line: { width: 2 }
            },
            name: 'Data Points'
        },
        {
            type: 'scatterternary',
            mode: 'line',
            a: [0.3, 0.1, 0.1, 0.3, 0.7],
            b: [0.4, 0.2, 0.2, 0.5, 0.2],
            c: [0.3, 0.7, 0.7, 0.2, 0.1],
            line: {
                symbol: 100,
                color: '#007365',
                size: 14,
                line: { width: 2 }
            },
            name: 'Data Points'
        }
        ];

        var layout = {
            ternary: {
                sum: 1,
                aaxis: { title: 'Component A', min: 0.01 },
                baxis: { title: 'Component B', min: 0.01 },
                caxis: { title: 'Component C', min: 0.01 }
            },
            title: 'Ternary Plot Example'
        };

        Plotly.newPlot('ternaryPlot', data, layout);
    });
    </script>
    在上面引入js代码
 <!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.38.3/plotly.min.js"></script>
</body>
</html>