个人中心
gpt4 book ai didi

Javascript 从数组中选择数据以创建供图表使用的集合列表

转载 作者：行者123 更新时间：2023-11-30 11:22:02 24 4
gpt4 key购买 nike

我在下面有一个构建条形图的脚本，但我需要从我的数组中提取数据点，数组数据始终是随机的，用户可以选择他们想要的数据作为 x 轴以及哪些数据将是y 轴。

var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1","February,104967,274354,1","March,202394,343509,1","April,187532,94652,1","May,138745,206456,1","June,234857,143657,1","July,193453,203433,1","August,96343,45064,1","September,371298,505635,1","October,63756,85635,1", "November,45363,14355,1", "December,98642,173125,1"];

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    theme: "light2",
    title:{
        text: title.value
    },
    axisY: {
        title: yaxis.value
    },
    data: [{
        type: "column",
        dataPoints: [
        { y: , label: },
    ]
}]
});
  chart.render();
}

因此，如果用户选择 yaxis 作为支出，xaxis 作为月份，数据点将构建为 { y: 18458, label: January}，并且将重复直到这些标题下的所有数据都被使用。

我正在尝试找出执行此操作的最佳方法，我已经制作了下拉列表来声明他们在 x 轴和 y 轴内想要的值。通过这个调用名称； 

var xaxis = document.getElementsByName('xaxis')[0];
var yaxis = document.getElementsByName('yaxis')[0];

最佳答案

好的，当您使用 CanvasJS 图表时，只需编写一些代码来根据用户选择更新您的图表。

这是如何在 CanvasJS https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/working-with-data/ 中处理数据的文档

我想每次用户选择轴时，您都需要检查是否选择了两个轴，如果是 - 重新渲染图表。

function updateChart() {
  let newData = [];
  myArray.forEach(function(dataEl) {
    // update newData with each data element
  });
  chart.options.data[0].dataPoints = newData;
}

您还需要更改图表选项，例如 axisY 选项

最后就是阅读 CanvasJS 文档并根据自己的需求更新图表数据。

更新:

正因为你问了，这里是你的代码(当心月份在 Y 轴上，但我已经为此添加了处理 - 将图表类型切换为“条形图”)

var myArray = ["Month,Expenditure,Income,Year", "January,187458,297664,1",
        "February,104967,274354,1", "March,202394,343509,1", "April,187532,94652,1",
        "May,138745,206456,1", "June,234857,143657,1", "July,193453,203433,1",
        "August,96343,45064,1", "September,371298,505635,1",
        "October,63756,85635,1", "November,45363,14355,1",
        "December,98642,173125,1"];

    const select1 = document.querySelector('select[name=xaxis]');
    const select2 = document.querySelector('select[name=yaxis]');

    myArray[0].split(',').forEach(item => {
        select1.appendChild(document.createElement('option')).textContent = item;
        select2.appendChild(document.createElement('option')).textContent = item;
    });


    function generateBar() {

        var title = document.getElementById("chartTitle");
        var xaxis = document.getElementsByName('xaxis')[0];
        var yaxis = document.getElementsByName('yaxis')[0];

        let type = 'column';
        let xaxisVal = xaxis.value;
        let yaxisVal = yaxis.value;
        if (yaxisVal === "Month") {
            type = 'bar'; // for this case bar type
            xaxisVal = yaxis.value;
            yaxisVal = xaxis.value; // Y cannot be non-integer
        }

        let columns = myArray[0].split(',');

        var dataPoints = myArray.slice(1).map((el) => {
            let dataParts = el.split(',');
            return {
                y: parseInt(dataParts[columns.indexOf(yaxisVal)]),
                label: dataParts[columns.indexOf(xaxisVal)]
            }
        });

        var chart = new CanvasJS.Chart("chartContainer", {
            animationEnabled: true,
            theme: "light2", // "light1", "light2", "dark1", "dark2",
            title:{
                text: title.value
            },
            axisY: {
                title: yaxis.value
            },
            data: [{
                type: type,
                dataPoints: dataPoints
            }]
        });
        chart.render();

    }
<!DOCTYPE html>
<html>
<body>
<table>
    <p>X-Axis Data</p><p><select name="xaxis">
</select></p><p>Y-Axis Data</p><p><select name="yaxis"></select></p>
    <p>Create a Title for Your Chart</p><input type="text" id="chartTitle"><p>
    <button onclick="generateBar()">Generate Chart</p>
</table>
<div id="chartContainer" style="height: 100%; width: 100%;"></div>
</body>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</html>

关于Javascript 从数组中选择数据以创建供图表使用的集合列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49484436/

24 4 0
文章推荐： javascript - 正则表达式也应该适用于 '-'
文章推荐： java - 删除最后一行 apache poi
文章推荐： swift - 中心对齐 subview
文章推荐： Swift 4 以编程方式定位元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com