javascript - 没有 jQuery 和光标绘图的交互式 javascript 图表

Question

我正在尝试为 JS 寻找一个免费的图表库，它不需要 jQuery 并且能够在指定位置添加垂直光标条。交互性会很好。我只需要一个折线图，不需要 donut 。有人知道这种生物是否存在吗？

Answer 1

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 轴上设置了一个具有一定范围和较低不透明度的标记。

如果您正在寻找其他东西，请告诉我，我会制作另一个演示。我是 ZingChart 团队的一员，很乐意提供帮助:)