ExtJS 折线图:如何标红某个点?
"在ExtJS中,可以使用highlight属性来标红某个点。\n\n首先,创建一个线图并指定数据源和配置项,例如:\n\njavascript\nvar store = Ext.create('Ext.data.Store', {\n fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],\n data: [\n { 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },\n { 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },\n { 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },\n { 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },\n { 'name': 'metric five', 'data1': 27, 'data2': 38, 'data3': 36, 'data4': 13, 'data5': 33 }\n ]\n});\n\nvar chart = Ext.create('Ext.chart.CartesianChart', {\n width: 600,\n height: 400,\n renderTo: Ext.getBody(),\n store: store,\n axes: [\n {\n type: 'numeric',\n position: 'left',\n fields: ['data1', 'data2', 'data3', 'data4', 'data5'],\n grid: true,\n minimum: 0\n },\n {\n type: 'category',\n position: 'bottom',\n fields: ['name']\n }\n ],\n series: [\n {\n type: 'line',\n title: 'Metric 1',\n xField: 'name',\n yField: 'data1',\n highlight: true, // 标红\n style: {\n lineWidth: 2\n },\n marker: {\n type: 'circle',\n radius: 4,\n lineWidth: 2\n }\n }\n ]\n});\n\n\n在上面的示例中,我们创建了一个具有一条线的折线图。通过设置highlight属性为true,可以使该线上的点在鼠标悬停时标红。\n\n如果希望在特定条件下标红某个点,可以使用highlightItem方法。该方法接受一个索引参数,用于指定要标红的点的索引。例如:\n\njavascript\nchart.series[0].highlightItem(2); // 标红索引为2的点\n\n\n这样可以在代码中的特定位置标红某个点。\n
原文地址: https://www.cveoy.top/t/topic/p28E 著作权归作者所有。请勿转载和采集!