zoukankan      html  css  js  c++  java
  • kendo column chart

     目录

    1、用js操作chart,

    2、tooltip template鼠标悬浮显示内容,

    3、双坐标轴,axisCrossingValues: [0, 30],3指的是跨越横坐标轴标签项数,显示在右侧

    4标签永远在下边,categoryaxis里多加个series-axis,valueAxes里加个 axisCrossingValue: [0, @int.MinValue]

    5、更新数据

    6、全部代码

    7、图中只有一种柱,统一设置颜色,用.Column().Color("#5EB6E4")

    @(Html.Kendo().Chart<ChartSeriesModel>()
    .Name("equipmentChart")
    .Title(Resources.RegionEquipmentReportMachineTotal)
    .Legend(legend => legend.Visible(false))
    .DataSource(ds => ds.Read(read => read.Action("GetEquipmentTotalData", "ReportManage")))
    .SeriesDefaults(seriesDefaults => seriesDefaults
    .Column().Color("#5EB6E4")
    )
    .Series(series => series.Column(model => model.Value,null, model => model.Category, null))
    .Tooltip(tooltip => tooltip
    .Visible(true)
    .Format("{0}")
    )

    1、用js操作chart,

    2、tooltip template鼠标悬浮显示内容,

    3、双坐标轴,axisCrossingValues: [0, 30],3指的是跨越横坐标轴标签项数,显示在右侧

    4标签永远在下边,categoryaxis里多加个series-axis,valueAxes里加个 axisCrossingValue: [0, @int.MinValue]

    categoryAxis: [{
    line: {
    visible: false
    },
    name: 'series-axis',
    axisCrossingValues: [0, 30]
    }, {
    line: {
    visible: false
    },
    categories: otherCategoryData,
    name: 'label-axis',
    axisCrossingValues: [0, 30]
    }
    ],

    5、更新数据

    $("#chartType").data("kendoChart").options.series[0].data = [
    {
    category: "500万元以下",
    value: firstLayerAmount,
    color: "#CCFFCC"
    }, {
    category: "500-1000万元",
    value: secondLayerAmount,
    color: "#99CCCC"
    }, {
    category: "1000-2000万元",
    value: thirdLayerAmount,
    color: "#9999CC"
    }, {
    category: "2000-5000万元",
    value: fourthLayerAmount,
    color: "#CC99CC"
    }
    ];
    $("#chartType").data("kendoChart").refresh();

    6、全部代码

    $("#otherChart").kendoChart({
    title: {
    text: verticleCompareField + "利润总额其他方面分布图"
    },
    legend: {
    position: "top"
    },
    tooltip: {
    visible: true,
    template: '#= series.name #: #= value #'
    },
    series: [
    {
    name: "利润总额",
    type: "column",
    data: otherAmountData,
    axis: "amount"
    },
    {
    name: "企业数量",
    type: "column",
    data: otherCountData,
    axis: "companyCount"
    }
    ],
    valueAxes: [
    {
    title: { text: "万元" },
    name: "amount",
    color: "#ff6800",
    axisCrossingValue: [0, @int.MinValue]
    }, {
    name: "companyCount",
    title: { text: "家" },
    color: "#a0a700",
    axisCrossingValue: [0, @int.MinValue]
    }
    ],
    categoryAxis: [{
    line: {
    visible: false
    },
    name: 'series-axis',
    axisCrossingValues: [0, 30]
    }, {
    line: {
    visible: false
    },
    categories: otherCategoryData,
    name: 'label-axis',
    axisCrossingValues: [0, 30]
    }
    ],
    pannable: {
    lock: "y"
    },
    zoomable: {
    mousewheel: {
    lock: "y"
    },
    selection: {
    lock: "y"
    }
    }
    });
    }
    };

  • 相关阅读:
    Jmeter使用自定义编写代码
    Jmeter关于断言
    Jmeter之函数助手
    无界面运行Jmeter压测脚本 --后知者
    接口测试全流程总结
    全面的功能测试点总结
    简述核心网
    题1:一个手机H5测试页面,页面上有一个文本输入框和一个次数的按键---测试用例编写
    2019 版_Python 常见的 170 道面试题全解析:编码规范
    2019 版_Python 常见的 170 道面试题全解析:语言特性
  • 原文地址:https://www.cnblogs.com/taoshengyujiu/p/5772048.html
Copyright © 2011-2022 走看看