Question

我遇到了一个问题，我的MVC模型对象中有IEnumerable<string>个标签和IEnumerable<double[]>数据，我想用Chartjs绘制这些值。

我将两个都传递给我的javascript函数，我试图绘制图表。

我想要的Chartjs语法实际上是：

var data = {
               ... chart info e.g. colors, etc.
               datasets: [
                   {
                       label: labels[0], // My first label
                       data: datas[0]    // My first double[]
                   },
                   // Repeat for each data/label combo
                   {
                       label: labels[n], // My n-th label
                       data: datas[n]    // My n-th double[]
                   }
               ]
           };

鉴于我的两个馆藏，我如何恰当地提取其中的信息？显然，这些集合的长度必须相同，因为存在一对一的关联。我确实尝试将它们组合到一个元组中，但我认为这会使它在js方面变得更复杂。

或者有没有人知道使用ChartJS获得相同最终结果的更简单方法？

我对C＃很满意，但Javascript对我来说是新手。

Answer 1

您当然可以将元组发送到客户端并使用java脚本轻松拆分。您可以执行一个简单的ajax调用，将您的元组作为Json对象，然后将其拆分为两个数组。然后可以在chart.js标签和数据点中使用这些数组。

$.ajax({
    url: 'AjaxCall/getChartObjects',
    dataType: 'json',
    data: {},
    success: function (data) { //data here being the tuple recieved from server
        //receive the tuple as a single Json object and split it up easily with some seperate arrays
        dblArray= [] 
        $.each(data.Item1, function (index, value) {
            dblArray.push(value.text); //label array
        }
        descArray= []
        $.each(data.Item2, function (index, value) {
            descArray.push(value.dblTxt); //data array
        }
    },
    error: function (xhr, status, error) {
        console.log('Error: ' + error.message);
    }
});

从控制器发送元组将类似于：

//tuple sends two objects together- both job arrays will be seperated 
//and used in observables on client side
var chartObjects = Tuple.Create(chartData, chartLabel);

return Json(chartObjects, JsonRequestBehavior.AllowGet);

然后，您将需要放置在图表属性中的数组：

var barChartData = {
                labels: descArray, //array labels
                datasets: [
                    {
                        type: "Bar",
                        strokeColor: "black",
                        pointColor: "rgba(220,220,220,1)",
                        pointstrokeColor: "white",
                        data: dblArray,

                    }
                ]
            }

我想我不完全确定这是不是你想要的。如果您有疑问，请告诉我。

在Javascript中为Chartjs迭代IEnumerable

1 个答案: