kendoUI的charts

原创于 2020-12-18 10:36:52 发布

· 264 阅读

0 ·

版权

文章标签：

#vue.js

本文将探讨如何在Vue.js项目中集成kendoUI的charts组件，通过实例展示如何创建交互式数据可视化图表，包括配置数据源、样式和交互功能，助你提升前端数据展示能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="chart"></div>
<script>
    $("#chart").kendoChart({
      dataSource: {
        data: [
          {a:1,b:'w'},
          {a:3,b:'e'},
          {a:5,b:'a'},

          {a:7,b:'d'},
          {a:8,b:'a'},
          {a:10,b:'s'},

        ],
        sort: {
          field: "ShipCountry",
          dir: "asc"
        }
      },
      
      title: {
        text: "Orders by Country",
        font: "20px sans-serif",
        color: "pink"
      },
      seriesDefaults: {
        type: "column"
      },
      series: [{
        field: "a",
        categoryField: "b",
        color:'rgba(123,324,234,0.7)'
      }],
   
      valueAxis: {
        title: {
          text: "metric tons",
          color:"red"
        },
       
      },
      tooltip: {
        visible: true,
         font: "20px sans-serif",
        template: "#= category #: #= value # ",
        background:'yellow'
      }
    });
</script>
</body>
</html>

在这里插入图片描述