【问题标题】:How to use zingchart with ng-repeat so i can show different data on different charts. Is there any way如何将 zingchart 与 ng-repeat 一起使用,以便我可以在不同的图表上显示不同的数据。有没有什么办法
【发布时间】:2018-01-03 04:41:05
【问题描述】:

数组是

array = [{
    humidity: 100
    , max_temp: 289.48
    , min_temp: 288.597
    , pressure: 1005.27
    , sea_level: 1030.68
}
, {
    humidity: 84
    , max_temp: 300.73
    , min_temp: 298.697
    , pressure: 1026.02
    , sea_level: 1026.67
}]

HTML 中的代码是

<div class="chart" ng-repeat="obj in array">
            <div id="resizable">
                <div zingchart zc-values="myValues" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
            </div>
            <ul class="chartinfo">
                <li>0 : Humidity {{obj.humidity}}</li>
                <li>1 : Maximum Temprature {{obj.max_temp}}</li>
                <li>2 : Minimum Temprature {{obj.min_temp}}</li>
                <li>3 : Pressure {{obj.pressure}}</li>
                <li>4 : Sea Level {{obj.sea_level}}</li>
            </ul>

        </div>

ul li 中的数据应该显示在图表上。我该怎么做呢。 在控制器部分做什么

【问题讨论】:

标签: javascript angularjs angularjs-ng-repeat zingchart


【解决方案1】:

我找到了解决办法。

zc 值在其中接受数组,因此如果将数组传递给它。然后它就可以正常工作了。

因此,为此将您的数组转换为数组数组并将其传递给 ng-repeat 并将数组对象传递给 zc-value。

数组应该是:

数组 = [[100, 289.48, 288.597, 1005.27, 1030.68],[84, 300.73, 298.697, 1026.02, 1026.67]];

而且html中的代码应该是

<div class="chart" ng-repeat="obj in array">
        <div id="resizable">
            <div zingchart zc-values="obj" zc-json="myJson" zc-width="100%" zc-height="100%"></div>
        </div>
        <ul class="chartinfo">
            <li>0 : Humidity {{obj[0]}}</li>
            <li>1 : Maximum Temprature {{obj[1]}}</li>
            <li>2 : Minimum Temprature {{obj[2]}}</li>
            <li>3 : Pressure {{obj[3]}}</li>
            <li>4 : Sea Level {{obj[4]}}</li>
        </ul>

    </div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-04
    • 2021-02-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多