没有jQuery和带光标绘制的交互式JavaScript图表 [英] Interactive javascript chart without jQuery and with cursor plotting

问题描述

我试图找到一个免费的图表库JS，不需要jQuery，并能够在指定的位置添加垂直光标栏。交互性会很好。我只需要一个折线图，不需要甜甜圈。

I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?

推荐答案

var chartJSON = {
  "type": "line",
  "background-color": "#fff",
  "border-color": "#dae5ec",
  "border-width": "1px",
  "title": {
    "margin-top": "7px",
    "margin-left": "12px",
    "text": "TODAY'S SALES",
    "background-color": "none",
    "shadow": 0,
    "text-align": "left",
    "font-family": "Arial",
    "font-size": "11px",
    "font-color": "#707d94"
  },
  "plot": {
    "animation": {
      "effect": "ANIMATION_SLIDE_LEFT"
    }
  },
  "plotarea": {
    "margin": "50px 25px 70px 46px"
  },
  "scale-y": {
    "values": "0:100:25",
    "line-color": "none",
    "guide": {
      "line-style": "solid",
      "line-color": "#d2dae2",
      "line-width": "1px",
      "alpha": 0.5
    },
    "tick": {
      "visible": false
    },
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-right": "5px"
    }
  },
  "scale-x": {
    "line-color": "#d2dae2",
    "line-width": "2px",
    "values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    "tick": {
      "line-color": "#d2dae2",
      "line-width": "1px"
    },
    "guide": {
      "visible": "false"
    },
    "markers": [{
      "type": "area",
      "range": [5, 7],
      "background-color": "red",
      "alpha": 0.3,
      "label": {
        "text": "Summer Sale",
        "alpha": 0.5
      }
    }],
    "item": {
      "font-color": "#8391a5",
      "font-family": "Arial",
      "font-size": "10px",
      "padding-top": "5px"
    }
  },
  "legend": {
    "layout": "2x2",
    "background-color": "none",
    "shadow": 0,
    "margin": "auto auto 15 auto",
    "border-width": 0,
    "item": {
      "font-color": "#707d94",
      "font-family": "Arial",
      "padding": "0px",
      "margin": "0px",
      "font-size": "9px"
    },
    "marker": {
      "show-line": "true",
      "type": "match",
      "font-family": "Arial",
      "font-size": "10px",
      "size": 4,
      "line-width": 2,
      "padding": "3px"
    }
  },
  "crosshair-x": {
    "lineWidth": 1,
    "line-color": "#707d94",
    "plotLabel": {
      "shadow": false,
      "font-color": "#ffffff",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px",
      "alpha": 1
    },
    "scale-label": {
      "font-color": "#ffffff",
      "background-color": "#707d94",
      "font-family": "Arial",
      "font-size": "10px",
      "padding": "5px 10px",
      "border-radius": "5px"
    }
  },
  "tooltip": {
    "visible": false
  },
  "series": [{
    "values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
    "text": "Kenmore",
    "line-color": "#4dbac0",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#36a2a8",
      "shadow": 0
    },
    "palette": 0
  }, {
    "values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
    "text": "Craftsman",
    "line-width": "2px",
    "line-color": "#25a6f7",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#1993e0",
      "shadow": 0
    },
    "palette": 1,
    "visible": 1
  }, {
    "values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
    "text": "DieHard",
    "line-color": "#ad6bae",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#975098",
      "shadow": 0
    },
    "palette": 2,
    "visible": 1
  }, {
    "values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
    "text": "Land's End",
    "line-color": "#f3950d",
    "line-width": "2px",
    "shadow": 0,
    "marker": {
      "background-color": "#fff",
      "size": 3,
      "border-width": 1,
      "border-color": "#d37e04",
      "shadow": 0
    },
    "palette": 3
  }]
}


zingchart.render({
  id: "myChart",
  height: 300,
  width: 500,
  data: chartJSON
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>

<div id="myChart"></div>

你是指这样的东西吗？这是通过 ZingChart 完成的，可免费使用。在x轴上设置一个标记，其范围和不透明度降低。

Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.

让我知道如果你正在寻找别的东西，我会把另一个演示。我在ZingChart的团队，并乐意帮助：）

Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)

这篇关于没有jQuery和带光标绘制的交互式JavaScript图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！